Como usar Lightbox 2

Lightbox es una liberia hecha en javascript que permite visualizar imagenes de una forma agradable (por asi decirlo), aunque tambien permite crear una galeria y facilitar la navegacion. Aqui les mostrare como podemos utilizar esta libreria facilmente.

Lo primero que tenemos que hacer es descargar lightbox. Existen muchos proyectos parecidos y algunos con elementos adicionales, pero sabiendo como implementar uno podremos manejar cualquier otro.

Al descargar los archivos tendremos el javascript, la hoja de estilos y las imagenes (que podemos cambiar a nuestro antojo)

En nuestro proyecto agregamos estos elementos y configuramos nuestra pagina de la siguiente forma:

1. Agregamos la referencia a los archivos javascript del lightbox

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

2. Agregamos la referencia del archivo de estilo

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

3. Para que se identique a que vinculo se le quiere agregar el lightbox la agregamos la etiqueta rel="lightbox".

<a href="ruta/image-1.jpg" rel="lightbox" title="texto">imagen</a>

4. Si se quiere crear una galeria (poder ver las imagenes en secuencia), la etiqueta va llevar el nombre del grupo rel="lightbox[grupo]". Por pruebas y algunos problemas que tuve, recomiendo colocar los elementos en un div con el mismo class (una buena sugerencia).

<div class="imagenes"><a href="photos/image_01.jpg" rel="lightbox[group]” title=”image title 01>first picture</a></div>
<div class="imagenes">
<a href=”photos/image_02.jpg” rel=”lightbox[group]” title=”image title 02>second picture</a></div>
<div class="imagenes"> <a href=”photos/image_03.jpg” rel=”lightbox[group]” title=”image title 03>third picture</a></div>

Ejemplo