Superscripts :

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?
  2. Funcionalidades soportadas
  3. Descarga
  4. Instalación y configuración
  5. Por hacer...

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:

  1. 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).
  2. 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.
  3. 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.

 

JSBuscador