SummArg | Cursos y recursos para webmasters

Elegante y simple modo de mostrar las imagenes: Lightbox 2

Lightbox 2 es un script que tiene tres años de vida por lo que no es novedad, pero lo hemos utilizado mucho y en SummArg todavía no existía una sección que mostrara sus características y modo de uso, así que decidimos compartirlo para aquellos que recién se inician como webmasters.

Este script es simple y no obstrusivo, además de ser totalmente compatible con todos los navegadores modernos. Su función es la de abrir una imagen en un contenedor nuevo con un agradable efecto que resalta la imagen en cuestión (demo en la página oficial). Es muy popular y se adaptó el script para su funcionamiento en foros, blogs, gestores de contenido en general y otros.

Instalar Lightbox 2 en un sitio web

1- Descargamos el script desde la sección downloads y lo descomprimimos.
2- Tomamos los tres directorios y los copiamos dentro de un directorio al que llamaremos scripts dentro de nuestro sitio web.
3- Incluimos el siguiente código entre etiquetas <head> </head> de la página en donde deseamos incluir el script.

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

4- Entre etiquetas <body> </body>, en donde deseamos colocar nuestra imagen con efecto Lightbox, colocamos el link de la siguiente manera:

<a href="images/image-big.jpg" rel="lightbox" title="mi imagen"><img src="images/image-mini.jpg" alt="Imagen peque&ntilde;a"></a>

En nuestro ejemplo image-mini.jpg correspondería a la imagen pequeña en donde el usuario habrá de clickear. Image-big.jpg será la imagen grande que visualizará con el efecto Lightbox.

Con Lightbox 2 no solo podremos dar un efecto a nuestras imagenes por separado, sino que también nos permite manejar galerías de imagenes. Para tal caso debemos colocar el código de la siguiente manera:

<a href="images/image-big-1.jpg" rel="lightbox[roadtrip]"><img src="images/image-mini-1.jpg" alt="Imagen peque&ntilde;a"></a>
<a href="images/image-big-2.jpg" rel="lightbox[roadtrip]"><img src="images/image-mini-2.jpg" alt="Imagen peque&ntilde;a"></a>
<a href="images/image-big-3.jpg" rel="lightbox[roadtrip]"><img src="images/image-mini-3.jpg" alt="Imagen peque&ntilde;a"></a>

De este modo habremos fabricado una galería con un buen efecto en nuestro sitio.

Por último, posiblemente deberemos adaptar algunas urls dentro del script para que se visualicen sus imagenes. Dentro de lightbox.js (líneas 49 y 50) están las rutas paraubicar la imagen loading.gif y closelabel.gif, deberían quedar de la siguiente manera:

LightboxOptions = Object.extend({
 fileLoadingImage:        'scripts/images/loading.gif',     
 fileBottomNavCloseImage: 'scripts/images/closelabel.gif',

Dentro de lightbox.css están las rutas para las imagenes prev.gif y next.gif, mas específicamente en las líneas 16 y 17.

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

Dependiendo de la ubicación que le des al script posiblemente no deban modificar ninguna de estas cuatro rutas, así que primero deberán probar la página en donde insertamos la imagen con el efecto lightbox para luego cambiar las rutas si fuera necesario.

Esperamos que les sea de utilidad!

Dejar un comentario