Lightbox es una aplicación desarrollada en JavaScript. Este script ha ganado popularidad y distribución gracias a su simplicidad y elegante estilo, además de su fácil implementación. Permite al usuario ver una versión original y ampliada de imágenes sin necesidad de ir a otra página, además de ofrecer una herramienta simple y profesional para el mostrado de imágenes en un sitio web.

Existen una gran variedad de clones de Lightbox que podemos ver de la mano de anieto2k.

Sin embargo aquí vamos a mostraros un ejemplo de un lightbox accesible, es decir una galería de imágenes usando JavaScript no intrusivo y un correcto marcado semántico.

Ejemplo Lightbox Accesible

Antes que anda debemos de disponer de 3 archivos para que nos funcione la galería de imágenes con LightBox; jquery.lightbox-0.5.css, jquery.js y jquery.lightbox-0.5.js. Estos 3 archivos, lógicamente debemos ponerlo en nuestro código HTML para poder hacer uso de ellos. Así cuando se llame a dicha función no falte nada. Además de los archivos os dejo las imágenes que se usan como elementos de navegación en lightbox. Para no descargar todos los archivos por separado. Os dejo un archivo zip con todos los ficheros que se usan en el ejemplo: Descargar ejemplo. A continuación explicamos detalladamente como implementar nuestra galería de imágenes:

HTML

1
2
3
4
5

<ul class="lista-img">
<li><a href="img/imagen_1.jpg" title="Título imagen 1"><img alt="Título imagen 1" src="img/imagen_1.jpg" /></a></li>
<li><a href="img/imagen_2.jpg" title="Título imagen 2"><img alt="Título imagen 2" src="img/imagen_2.jpg" /></a></li>
<li><a href="img/imagen_3.jpg" title="Título imagen 3"><img alt="Título imagen 3" src="img/imagen_3.jpg" /></a></li>
</ul>

Como podemos ver en el código HTML del ejemplo. Tenemos el enlace que apunta a la imagen con el atributo href. Si el JavaScript está activado, funcionará con el efecto de Lightbox, y en el caso de que no lo esté funcionara como un enlace a una imagen.

Para que el Lightbox funcione, debemos poner esta línea de JavaScript donde especificamos los enlaces. De esta manera llamará a la función y usará las imagenes que se encuentra dentro de los elementos de enlace:

JavaScript

1
2
3
4
5
6
7

<script type="text/javascript">
<!--
$(function() {
	$('.lista-img a').lightBox();
});
-->
</script>

Con lo explicado, tendríamos lo suficiente para tener nuestra propia galería de imágenes. Ya tenemos un HTML correcto, un Javascript no intrusivo y una alternativa a dicho JavaScript. El resultado final podemos apreciarlo en el siguiente enlace:

Ver ejemplo funcionando