JSAlbum
Album de fotos con indice y visor de imágenes
Pruébalo en:
ejemplo de JSAlbum
Descárgalo en:
fichero .zip para JSAlbum version 2.0
1. ¿Qué es JSAlbum?
JSAlbum es un album de fotos con indice y visor de imágenes, diseñado para permitir la creación de páginas de índices de miniaturas (thumbnails) en las que cada miniatura incluye un enlace que permite mostrar la imagen al tamaño deseado en un visor que además incorpora funciones de avance y retroceso.
JSAlbum está realizado integramente con JavaScript de cliente, por lo que para su instalación y ejecución no es necesario ejecutar ningún programa o aplicación en el servidor web. Por tanto, no es un CGI, y no utiliza PHP, JSPs ni cualquier otra tecnología de servidor.
JSAlbum ofrece grandes ventajas para la gestión y creación de índices de fotos o imágenes:
- Su instalación no requiere permisos especiales en el servidor web: se descarga al servidor como el resto de páginas.
- Su configuración y personalización se basa en JavaScript y HTML: no hace falta conocer otros lenguajes.
- Su funcionamiento requiere sólo 2 ficheros: una página HTML que no cambia nunca, y un fichero JavaScript donde se configuran los álbumes. Por ello, gestionar cientos de índices no requiere mantener cientos de páginas.
JSAlbum no tiene limitaciones, está soportado por todos los navegadores que soporten JavaScript (es decir, la inmensa mayoría), y no requiere ningún plug-in o extensión para su ejecución. Es apropiado para sites de álbumes de fotos, galerías de imágenes o índices, sea cual sea su tamaño, dada su sencillez y facilidad de uso.
2. Funcionalidades soportadas
JSAlbum incluye las siguientes funcionalidades avanzadas:
- Posiblidad de configurar varios álbumes o galerías con 2 únicos ficheros, album.html y album.js.
- Posibilidad de usar miniaturas o thumbnails.
- Completo visor de imágenes con funciones de avance y retroceso, y botones para ir a la última y a la primera imagen de la lista.
- El diseño de las páginas de índice y del visor es fácilmente configurable mediante variables JavaScript. Se pueden configurar colores, tipos de letra, aspecto de los enlaces, imágenes, etc.
- Posiblidad de definir el tamaño de todas las imagenes del visor para el album como el tamaño de las miniaturas por un multiplicador. Es adecuado cuando todas las imagenes son del mismo tamaño.
Nuevo en la versión 2.0
La versión 2.0 supone un cambio de arquitectura que permite importantes mejoras:
- Nuevo diseño, que utiliza las propiedades y objetos del DOM para modificar el contenido de un elemento contenedor una vez que se ha cargado la página. De esta forma, se consiguen funcionalidades avanzadas, como la deteccion de imagenes, y la posibilidad de navegar por el album sin recargar la página.
- Deteccion de imagenes inexistentes en la secuencia de imagenes de la galería. La secuencia de imagenes es precargada para averiguar las imagenes que realmente existen en el directorio. Las que no existen no se muestran.
- Rotación de imágenes verticales, para mostrarlas correctamente (sólo soportado por el IE 5.5 o superior): se puede indicar que imagenes deben ser giradas cuando se muestren en el visor.
- Mas opciones de configuración para definicion del aspecto visual del album (bordes).
Para que puedas verlo en acción, hemos creado una página de ejemplo de JSAlbum.
3. Descarga
JSAlbum version 2.0: jsalbum_v2.0.zip
Puedes consultar versiones anteriores en el histórico de versiones de JSAlbum.
4. Instalación y configuración
Instalación
La instalación es muy sencilla y se realiza en 3 pasos:
- Abre el fichero album.js con tu editor de texto favorito, y modifica los valores de las variables de la sección CONFIGURACION, para adaptar el album al diseño de tu página web (ver el apartado Configuración para más información sobre las opciones de configuración).
- El fichero album.html es la página HTML contenedora del album de fotos. Puedes abrirlo en tu editor de textos favorito y adaptar su diseño al estilo de tu página web.
- Copia los ficheros album.js (motor del album) y album.html (contenedor) en una carpeta de tu sitio web (los dos en la misma). Copia también las imágenes de los botones del visor, incluidas en el .zip.
Tu album de fotos ya está listo para ser utilizado. Para mostrar la página indice de las galerías disponibles tienes que cargar la página album.html.
Configuracion
Las opciones de configuracion de la versión 2.0 son las siguientes
| url_album | URL del album en tu sitio web |
| tipo_fuente grosor_fuente color_fuente tamano_fuente |
Opciones para las fuentes. Los tamaños deben incluir la medida (por ejemplo, 2px para 2 pixels). |
| tamano_fuente_titulo grosor_fuente_titulo color_fuente_titulo |
Opciones para las fuentes del titulo. Los tamaños deben incluir la medida (por ejemplo, 2px para 2 pixels). |
| color_fondo | Color de fondo |
| color_enlace grosor_enlace color_enlace_visitado color_enlace_activo fondo_enlace_visitado |
Opciones de colores para los enlaces |
| ancho_visor | Anchura de la tabla contenedora de los índices y del visor de imágenes. Deben incluir la medida (por ejemplo, % para expresar que es un porcentaje del ancho de la ventana). |
| padding_filas margen_izdo_tablas margen_dcho_tablas |
Permiten definir valores de padding y márgenes para las tablas. Deben incluir la medida (por ejemplo, 2px para 2 pixels). |
| margen_izdo_parrafos margen_dcho_parrafos |
Permiten definir márgenes para los párrafos. Deben incluir la medida (por ejemplo, 2px para 2 pixels). |
| color_borde_indice grosor_borde_indice color_borde_visor grosor_borde_visor |
Estilos para los bordes de las imágenes de la galería y del visor. Los tamaños deben incluir la medida (por ejemplo, 2px para 2 pixels). |
| albums | Array de objetos para la definición de los álbumes de imágenes (ver Configuración de los álbumes de fotos para más información |
| listaRotar | Array de cadenas para la definición de los identificadores numéricos de las imágenes que hay que rotar al mostrarlas en el visor (ver Configuración de los álbumes de fotos para más información |
Configuración de los álbumes de fotos
Los álbumes de fotos se construyen con un array de objetos, de nombre albums, definido en el fichero album.js. Los elementos de este array son objetos que contendrán la información necesaria para mostrar las galerías de imágenes y el visor. Cada objeto del array contiene para cada album:
- La ruta física de las imágenes.
- El prefijo del nombre de las miniaturas o thumbnails de cada imagen (si se usan miniaturas).
- La raiz del nombre de cada imagen (el nombre final estará formado por la raíz y un número entero).
- La extensión de las iágenes (típicamente, .gif o .jpg, debe ser la misma para todas las imágenes del album).
- Ancho y alto (en pixels) de las imágenes miniaturas.
- Número inicial y número final de la secuencia de imágenes (el nombre de la primera imagen estará formado por la raíz más el número inicila, el de la última por la raíz más el número final).
- Número de columnas de la página índice del albúm (es decir, número de imágenes por fila).
- Multiplicador: el tamaño de la imagen en el visor será iguale al definido para las miniaturas, multiplicado por este valor. Si se desea que el tamaño sea el propio de la imagen, se debe dejar a 0.
- Título del album
En el ejemplo, hemos incluido la definición de 2 álbumes:
albums[0] = new ObjetoAlbum( '/images/rusia/', 'mini_', 'IMG_', 'jpg', 160, 120, 1, 11, 4, 5, 'Indice de imágenes de Rusia' )
albums[1] = new ObjetoAlbum( '/images/guggen/', 'T_', 'foto_', 'jpg', 100, 90, 1, 8, 4, 0, 'Indice de imágenes del Guggenheim Bilbao' )
Para que la definición de los álbumes esté completa, hay que indicar qué imagenes del album deberán ser rotadas cuando se muestren en el visor (funcionalidad sólo soportada para el IE 5.5 o superior). Para ello, hay que definir otro array, de nombre listaRotar, con tantos elementos como tenga el array albums. Los elementos de listaRotar son cadenas de texto, en las que se introducen los identificadores (números de secuencia) de las imágenes a rotar, separados por comas.
Para 2 álbumes, el array listaRotar se podría definir como sigue:
listaRotar[0] = '7,11'
listaRotar[1] = ''
Esta definición indica que de la primera galería, hay que rotar las imágenes 7 y 11. De la segunda, ninguna.
5. Por hacer...
Queda mucho por hacer para mejorar JSAlbum. En mente tenemos las siguientes mejoras:
- Modo de visualización de imágenes en modo presentación para el visor (las imágenes se muestran una tras de otra, con un tiempo de espera entre cada una de ellas).
- Posibilidad de incluir una descripción para cada imagen.
- Posibilidad de añadir un enlace para cada imagen mostrada en el visor.
