Muchos sitios web utilizan galerías de imágenes para mostrar sus productos y servicios. Este tipo de galerías muestran una serie de miniaturas de imágenes que se amplían al pinchar sobre cada imagen. Hasta hace poco, la técnica más utilizada para construir una galería consistía en incluir las miniaturas en la página y abrir cada imagen grande en una ventana emergente (o pop-up) o en una nueva página.
El uso de técnicas basadas en JavaScript ha supuesto una revolución en la creación de las galerías de imágenes y ha permitido mejorar la experiencia de navegación del usuario. La técnica se conoce como Lightbox y fue creada originalmente por Lokesh Dhakar. Lightbox es una técnica muy sencilla de utilizar, funciona correctamente en todos los navegadores y permite mantener la semántica del documento (no ensucia la página con código JavaScript).
El código de la versión más reciente se puede descargar gratuitamente en http://www.huddletogether.com/projects/lightbox2/, donde también se puede ver una demostración de las galerías de imágenes construidas con Lightbox.
La descarga incluye el código fuente del script, todos los archivos JavaScript externos necesarios, archivos CSS e imágenes de prueba y una breve pero completa documentación.
A continuación se indican los pasos necesarios para incluir Lightbox en una página web:
1) Enlazar los archivos JavaScript y CSS requeridos:
<!-- Dependencias -->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<!-- Código fuente -->
<script type="text/javascript" src="js/lightbox.js"></script>Lightbox utiliza dos de las librerías más conocidas y utilizadas para realizar aplicaciones JavaScript complejas: Prototype y Scriptaculous. Además de estos dos archivos JavaScript, también es necesario enlazar un archivo de tipo CSS que controla el aspecto de Lightbox y enlaza las imágenes utilizadas.
2) Activar Lightbox:
La página XHTML original contiene un enlace simple que abre una nueva página en la que se puede ver ampliada la imagen original:
<a href="images/image-1.jpg" title="Título de la imagen 1">Imagen 1</a>Para activar Lightbox, tan solo es necesario incluir el siguiente atributo rel:
<a href="images/image-1.jpg" rel="lightbox" title="Título de la imagen 1">Imagen 1</a>Ahora, si el usuario tiene activado JavaScript, al pinchar en el enlace:
Figura 8.14 Enlace con el atributo "lightbox" añadido
Se mostrará la imagen ampliada centrada en la misma página:
Figura 8.15 Imagen ampliada que se muestra al pinchar sobre el enlace
Lightbox se activa automáticamente para todos los enlaces cuyo atributo rel sea igual a lightbox. Además, Lightbox muestra como título de la imagen el valor del atributo title del enlace. Si el usuario no tiene activado JavaScript, la imagen se abrirá en una página nueva, como ocurre si no se utiliza Lightbox. La sencillez de uso y el resultado tan espectacular que se consigue son los puntos fuertes de Lightbox.
Normalmente, Lightbox no se utiliza con enlaces de texto sino con imágenes que contienen enlaces:
<a href="images/image-1.jpg" rel="lightbox" title="Título de la imagen 1"><img src="images/imagen_pequena1.jpg" /></a>Ahora, si el usuario tiene activado JavaScript, al pinchar sobre la imagen pequeña:
Figura 8.16 Imagen en miniatura con el enlace preparado para Lightbox
Se mostrará la imagen ampliada centrada en la misma página:
Figura 8.17 Imagen ampliada que se muestra al pinchar sobre la imagen en miniatura
La imagen ampliada se muestra con una vistosa animación y el fondo de la página completa se oscurece para que el usuario centre toda su atención en la imagen. El usuario puede cerrar la imagen ampliada y volver a la página original pulsando sobre la imagen CLOSE X de la esquina inferior derecha de la imagen.
Utilizar Lightbox aporta muchas ventajas respecto de la experiencia de usuario del sitio web. Además, el código XHTML permanece intacto y no se ensucia con llamadas a funciones JavaScript, ya que lo único que hay que añadir es un atributo rel="lightbox" a las imágenes y enlaces que vayan a utilizar Lightbox.
Además, Lightbox permite relacionar varias imágenes entre sí para crear una galería de imágenes. Así, mientras se visualiza una imagen ampliada es posible pasar a la siguiente imagen de la galería. Para relacionar varias imágenes entre sí, tan sólo es necesario aplicar un valor único al atributo rel como se muestra a continuación:
<a href="images/imagen-1.jpg" rel="lightbox[galeria1]">imagen #1</a>
<a href="images/imagen-2.jpg" rel="lightbox[galeria1]">imagen #2</a>
<a href="images/imagen-3.jpg" rel="lightbox[galeria1]">imagen #3</a>Todas las imágenes que tengan el mismo valor del atributo rel, automáticamente pasarán a formar parte de una galería de fotos por la que se puede navegar hacia la siguiente o hacia la anterior imagen.
La técnica Lightbox presentada solamente es válida para elementos de tipo imagen. No es posible por tanto mostrar una página web o cierto código XHTML dentro de una ventana de ese tipo.
Afortunadamente, existen otras librerías basadas en Lightbox y que permiten mostrar cualquier tipo de código XHMTL en el interior de la ventana. La más conocida es la técnica creada por ParticleTree y que se puede encontrar en: http://particletree.com/features/lightbox-gone-wild/