jQuery lightBox plugin | Ejemplo lightBox

A estas alturas el efecto de lightBox es bastante conocido (existe hasta para videos Videobox). El plugin que os muestro en el post se puede decir que es de los más conocidos, aunque existe alternativas como jQuery.popeye, Zoomy

Como usar el plugin:

Para comenzar necesitamos tener el javascript de jQuery y después descargar el plugin. Debemos incluir en la cabecera dos ficheros javascript:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>

También debemos incluir el fichero CSS:

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />

Incluimos las etiquetas HTML para enlazar una imagen, por ejemplo:

<a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>

Y por último incluimos el siguiente javascript que es el que activará el lightBox:

<script type="text/javascript">
$(function() {
// Use this example, or...
$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
// This, or...
$('#gallery a').lightBox(); // Select all links in object with gallery ID
// This, or...
$('a.lightbox').lightBox(); // Select all links with lightbox class
// This, or...
$('a').lightBox(); // Select all links in the page
// ... The possibility are many. Use your creative or choose one in the examples above
});
</script>

Visita  lightBox plugin

Ver una Demo

You may also like...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>