Galeria de fotos

Vamos a crear una galería de fotos o visor de fotos con efectos flash (animación). Para ello utilizaremos postcardviewer que es software libre y que produce un resultado muy atractivo (demo).

Sigue los siguientes pasos:

  • Descarga y descomprime  el contenido del archivo postcardviewer.zip (también descargable desde la barra lateral). Obtendrás una nueva carpeta con el nombre de postcardviewer con el siguiente contenido:

  • Abre el archivo index.html y podrás comprobar el funcionamiento de la galería.

  • En la carpeta imágenes se encuentran las imágenes que se van a mostrar. Lo que haremos será sustituir las del ejemplo por nuestras propias imágenes.
  • Una vez que hemos incluido nuestras imágenes tendremos que configurar el archivo imagedata.xml.
  • Para configurar la galería de forma manual haz clic derecho sobre el archivo imagedata.xml y elige Abrir con…> Bloc de Notas de Windows o bien con el editor gedit de Ubuntu.
  • Observa que por cada archivo de imagen que tenemos en la subcarpeta images debe existir una etiqueta xml: <image><name>… </name></image> en cuyo interior se coloca el nombre de archivo.
  • Si deseas añadir más imágenes deberás incorporar esta etiqueta <image> …</image> al final del documento definiendo el nombre del archivo.
  • Para guardar los cambios selecciona Archivo > Guardar como …. Conserva el nombre, ubicación y tipo de archivo pero cerciórate de que la codificación del documento es UTF-8. Clic en el botón Guardar.

Ahora ya tenemos la galería con nuestras imágenes y debemos ubicarla dentro de nuestro sitio. Lo más sencillo es coger la carpeta completa y colocarla en el directorio raíz, después enlazar el archivo index.html de la galería,de esta forma se mostrará  en una nueva página.

Si lo que queremos es que la galería se muestre dentro de una de nuestras páginas ya diseñada debemos utilizar la etiqueta <iframe>. Esta etiqueta incluye en un documento html un marco en que introduce otro documento html. Para que tenga la apariencia que queremos tenemos que manejar los atributos widht y height. Siempre irá acompañada (igual que la etiqueta <img> )del atributo src que indica la dirección del documento html qu queremos insertar.

Mira el siguiente ejemplo:

Ejemplo de <iframe> para la galería de fotos.

Fíjate en el código utilizado:

Anuncios

1 comentario (+¿añadir los tuyos?)

  1. arumamaya
    Dic 06, 2010 @ 03:58:05

    Es muy real!!! genial para los efectos fotográficos.

    Responder

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: