La representación de imágenes en las paginas Web se puede hacer de diversas maneras, pero una de las mas fáciles y que mejor se ven es utilizando la utilería LightBox la cual permite que estas 'salten' en la pagina.

Lightbox es un conjunto de utilerías creado por Lokesh Dhakar y su implementación es gratis y demasiado fácil. La ultima versión de Lightbox es la v.2.03.3 y puede ser bajada de esta liga.

Una ves puesto los archivos en la ruta donde la pagina reside, se tiene que incluir los siguientes JavaScripts en la sección <head> del html:


<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Se puede incluir el CSS que viene con el paquete o usarse uno especifico para la página:


<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

El codigo para que las imagenes salten en la pagina cuando un usuario hace click en la liga es muy simple, solo se tiene que añadir rel="lightbox" al tag de ligas:


<a href="images/image-1.jpg" rel="lightbox" title="Titulo de la imagen">
Imagen
</a>

Una ves añadido, el usuario podrá ver la imagen original con tan solo hacer click en esa liga.

LightBox2 - EjemploLightBox2 - Ejemplo

También se puede usar imágenes múltiples en la misma caja. Tan solo se tiene que indicar que pertenecen al mismo grupo (en este ejemplo a [Teqi]).


<a href="images/image-1.jpg" rel="lightbox[Teqi]">Imagen 1</a>
<a href="images/image-2.jpg" rel="lightbox[Teqi]">Imagen 2</a>
<a href="images/image-3.jpg" rel="lightbox[Teqi]">Imagen 3</a>

Una pestaña de previo y siguiente aparecerá en la parte de arriba de la imagen.

LightBox2 - Ejemplo con imagenes multiplesLightBox2 - Ejemplo con imagenes multiples

Lightbox es una serie de utilerias JavaScripts muy util las cuales facilitan el que tu sitio o pagina web muestre imagenes de una manera profesional y efectiva.