Web y desarrollo

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

Posted on: noviembre 27, 2008

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.

Anuncios

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

Muy bueno gracias por el aporte y sencillo de aplicar.

Hola Gotardo!!!

Ya se que el post tiene tiempo pero es ahora cuando he necesitado recurrir a su informacion. Necesito ayuda porque no logro hacer funcionar Lightbox y me estoy volviendo locoooo!!!

No entiendo muy bien de programacion asi que te digo lo que hago.

Justo encima de coloco las librerias:

Lo de activar las CSS de Lighbox 2 no tengo ni idea de como se hace. ¿Donde agrego el codigo que das?

Intento integrarlo en WordPress con el plugin.

Te agradeceria mucho la ayuda.

¡Hola, CS!
Todas las librerías debes incluírlas entre los tags y de tu página.
Para wordpress, más que editar la plantilla, supongo que te será más fácil instalar el plugin http://wordpress.org/extend/plugins/lightbox-2-wordpress-plugin/
De todas formas contacto contigo vía email para el caso de forma más detallada.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Posts Más Vistos

del.icio.us

Top Clicks

  • Ninguna

Calendario

noviembre 2008
L M X J V S D
    Dic »
 12
3456789
10111213141516
17181920212223
24252627282930
A %d blogueros les gusta esto: