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.
[html]
<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>
[/html]
Para agregar el efecto a alguna imagen solo basta con agregar el atributo rel=”lightbox”, veamos la implementación del código.
[html]
<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>
[/html]
