Test Foro de elhacker.net SMF 2.1

Programación => Desarrollo Web => Mensaje iniciado por: AFelipeTrujillo en 22 Junio 2010, 23:41 PM

Título: [Aporte] Lightbox y JQuery
Publicado por: AFelipeTrujillo en 22 Junio 2010, 23:41 PM
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 (http://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 (javascript) [Seleccionar]
<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 (javascript) [Seleccionar]
$(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 (javascript) [Seleccionar]
<a href="original1.jpg" title = "TITULO 2">
<img title = "TITULO 1" src="mini1.jpg" width="72" height="72" alt="" />
</a>


VER EJEMPLO (http://codes4ng3r.freehostia.com/Codes/ligthbox/)

VER FUENTE (http://angercode.wordpress.com/2010/01/28/lightbox-y-jquery/)