En este tutorial veremos como agregar a nuestras galería de fotos un buen efecto para hacerlas dinamicas, rápidas y atractivas para nuestros usuarios sin tener que recurrir a alguna aplicación flash.

Primero debemos descagar la aplicación completa de huddletogether.com y descomprimir el archivo en la raiz de nuestro sitio web.

Una vez que tenemos todos los archivos en su lugar debemos agregar en el head de nuestro html los JS y CSS que son necesarios para hacer funcionar Lightbox2.

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

Y ahora solo debemos agregar desde cada imagen miniatura un link a la imagen grande segun el siguiente codigo.

<a rel="lightbox" href="images/image-1.jpg">image #1</a>

Si queremos agregar una descripción para cada foto, lo podemos hacer seguen el siguiente ejemplo

<a title="descripcion" rel="lightbox" href="images/image-1.jpg">image #1</a>

Si lo que tenemos es una serie de imágenes que forman parte de un mismo grupo se le puede agregar un código a cada una para que desde una imagen podamos tener los botones SIGUIENTE y PROXIMO.

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

Los textos para cerrar, próximo, anterior, etc. son imágenes y están en inglés. Desde aca pueden descargar las imágenes traducidas al español. Solo deben descomprimir el archivo dentro de la carpeta IMAGES de la aplicación, reemplazando las originales.

Ver ejemplo de Lightbox2

Descargar Lightbox2

Descargar traducción a español de Lightbox2

Be Sociable, Share!

•