Lightbox 2 (o cómo conseguir ese delicioso efecto para ampliar imágenes)
Posteado por: Gotardo J. González en: 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:
- Descargar de la página oficial el código.
- Incluir en nuestra página las siguientes librerías: <script type=”text/javascript” src=”js/prototype.js”></script>
- Activar las CSS de Lighbox 2 -o incluír las nuestras-:<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />
- 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)
- 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>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects,builder”></script>
<script type=”text/javascript” src=”js/lightbox.js”></script>
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.
3 comentarios hacia "Lightbox 2 (o cómo conseguir ese delicioso efecto para ampliar imágenes)"
septiembre 27, 2009 a 11:14 pm
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.
septiembre 28, 2009 a 4:21 am
¡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.
noviembre 27, 2008 a 4:26 pm
Muy bueno gracias por el aporte y sencillo de aplicar.