Lightbox 2: Plugin de jQuery para crear galerías de imágenes

Muchas veces nos vemos en la necesidad de incluir en nuestro website una galería de imágenes o slider con efectos visuales. En esta oportunidad quiero mostrarte como agregar un efecto de zoom a cualquier imagen de nuestro website.

Iron Dolls – Female Bodybuilding Secrets//dl.dropbox.com/u/24311144/img/images/2012-05/imagen_lightbox.jpg” alt=”” />

Se trata de Lightbox 2 un plugin jQuery de javascript que nos permite agregar un efecto de zoom a nuestras imágenes.

Para usarlo necesitamos incluir por su puesto los archivos necesarios, jQuery y ligthbox.js como lightbox css, también debemos de verificar el archivo lightbox.css para ver la ruta de las imágenes ( loading.gif, close.png, next.png, prev.png ) estén en la ruta correcta.

<link rel="stylesheet" type="text/css" href="css/lightbox.css">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Para agregar el efecto a alguna imagen solo basta con agregar el atributo rel=”lightbox”, veamos la implementación del código.

<a href="images/image-1.jpg" rel="lightbox" title="my caption">
    <img src="images/thumb-1.jpg" alt="Pequeña descripcion" /></a>

<a href="images/image-2.jpg" rel="lightbox" title="my caption">
    <img src="images/thumb-2.jpg" alt="Pequeña descripcion" /></a>

Ver Demo de Lightbox 2
Descargar Lightbox 2

Web: Lightbox 2

También te puede interesar

Leave a Reply