jueves, 27 de noviembre de 2008

Lightbox 2 (o cómo conseguir ese delicioso efecto para ampliar imágenes)

Lightbox 2 es una biblioteca escrita en JavaScript que permite mostrar en pantalla una imagen a partir de una vista previa, de una forma elegante y con una instalación sencillísima (al estilo de, por ejemplo, Lolacamisetas.com).

En la web oficial podeis encontrar un ejemplo de uso que permite ampliar una imagen o a través de una ampliación navegar por un album de vistas previas. El potencial de esta biblioteca radica sobre todo en la limpieza del diseño: las capas se abren con transiciones, muestran una animación de carga, el resto de la página se oscurece, los botones de navegación se muestran nítidamente. Y además, como decía antes, la instalación es tan fácil como hacer lo siguiente:

  1. Descargar de la página oficial el código.

  2. Incluir en nuestra página las siguientes librerías:

  3. <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>

  4. Activar las CSS de Lighbox 2 -o incluír las nuestras-:<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

  5. Añadir el atributo rel = "lightbox" a los links de las imágenes cuya vista ampliada queremos mostrar con lightbox, por ejemplo:<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

    (El atributo title de la imagen se utiliza también como texto de la ampliación con lightbox)

  6. Por último, para agrupar imágenes en álbumes, no hay más que poner el nombre del álbum en el atributo rel del paso anterior de la siguiente forma:<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
    <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
    <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>


En Lightbox 2 existe también un foro de ayuda además algún que otro truco más para sacarle el máximo partido a esta biblioteca.

2 comentarios:

Pau dijo...

Hola, tengo un problema, te lo podria consultar haber si me lo pudieras solucionar¿? gracias!

Gotardo González dijo...

Claro que sí