marzo 11, 2010 5

Como utilizar Lightbox 2

By in JavaScript, Librerías

Lightbox es un script escrito en JavaScript que nos permite mostrar una “popup” con una imagen de una forma bastante elegante. Para hacer uso de Lightbox lo primero que vamos a hacer es descargarnos el script desde su página web.

Una vez que tenemos esto ya podemos incluirlo en nuestra página. Lo primero que tendremos que incluir es el framework Prototype y la librería de efectos Scriptaculous, ambas vienen con Lightbox, ya que Lightbox hace uso de estas. Una vez incluidas añadiremos también el script de Lightbox:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Tras añadir los script tenemos que incluir el archivo con los estilos de Lightbox:

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

Una vez hecho esto ya tenemos Lightbox listo para usarlo. Para ello tendremos que añadir el atributo rel con el valor “lightbox” al enlace que queremos que muestre nuestra imagen. Veamos un ejemplo:

<a href="images/image1.jpg" rel="lightbox" title="Imagen 1">imagen 1</a>

De ese modo al hacer click sobre el enlace se abrirá la imagen indicada en la propiedad href, pero lo hará mediante Lightbox. Si a la etiqueta <a> le añadimos el atributo title, en el ejemplo está, Lightbox nos mostrará también el título.

Podemos crear conjuntos añadiendo el nombre del conjunto entre corchetes en el atributo rel, de la siguiente forma:

<a href="images/image1.jpg" rel="lightbox[set]">imagen 1</a>
<a href="images/image2.jpg" rel="lightbox[set]">imagen 2</a>
<a href="images/image3.jpg" rel="lightbox[set]">imagen 3</a>

Como se ha podido ver con Lightbox podemos mostrar nuestras imágenes de una forma más elegante que mostrando solo la imagen en el navegador.

Podéis descargar un pequeño ejemplo en el siguiente enlace:

Demo de LightBox 2

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , ,

5 Responses to “Como utilizar Lightbox 2”

  1. Isidora dice:

    no entiendo el paso dos… donde tengo q agregar eso? <link rel="stylesheet" href="css/lightbox.css" type="text/css"media="screen" 

  2. karina dice:

    como puedo utilizarlo en mi pagina index, que al accesar a la direccion automaticamente me abra la ventana del ligthbox, sin presionar la imagen, se puede?

  3. luis dice:

    hola una pregunta como puedo utilizar el ligthbox para que me presente una pagina que esta en php como para inicio de secion por ejemplo o que otra aplicacion podria utilizar  por favor ayudandeme 

  4. dario dice:

    hola, no se como hacer  lightbox en este codigo <a href=”#”><img src=”images_catalogo/thumbs/2.jpg” data-large=”images_catalogo/2.jpg” alt=”image02″ data-description=”A plaintful story from a sistering vale” /></a>saludos y espero que me puedan ayudar

  5. Öctavio dice:

    Muchas gracias Manuel, muy bien explicado y sencillo, además que el tutorial descargado ya tiene todo lo que hay que tener, excelente.

Leave a Reply