Lightbox y JQuery
Bueno estuve desarrollando una pagina y uno de los requerimientos era un galería de imagines dinámica, entonces me puse en la búsqueda y encontré este plugin para el framework JQuery.
La forma de implementación es demasiada sencilla el único requerimiento es tener un versión thumb de las diferentes imágenes a mostrar y cuidar que todas la imágenes tengan la misma resolución.
Para empezar les dejo el plug para descargar www.4shared.com/file/209865982/12409a11/jquery-lightbox-05.htmll
Ejemplo:
Para sintetizar bien el ejercicio vamos hace un galería con nuestro amigo tux.
Para llamar la librería lo hacemos dentro de las etiquetas <script></script> y llamamos un estilo dentro de las etiquetas <link></link>
Código
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <link rel="stylesheet" href="css/jquery.lightbox-0.5.css" media="screen" />
Y a continuación hacemos las validaciones con JQuery
Código
$(function() { $('a[@rel*=lightbox]').lightBox(); $('#gallery a').lightBox(); $('a.lightbox').lightBox(); $('a').lightBox(); });
Y creamos la etiqueta que va a llamar las dos imágenes de la siguiente forma
Código
<a href="original1.jpg" title = "TITULO 2"> <img title = "TITULO 1" src="mini1.jpg" width="72" height="72" alt="" /> </a>
VER EJEMPLO
VER FUENTE