Nota: Este post es viejo! La nueva versión está aquí: Sexy Lightbox 2.

Sexy Lightbox es un clon, más sexy y más liviano, del clásico Lightbox. Fue construido pensando en los diseñadores webs, de fácil instalación y uso. Esta entrega trae dos versiones: una en blanco y otra en negro.

Sexy Lightbox requiere el framework Mootools 1.2

Compatibilidad: Funciona tanto en navegadores modernos, como en Internet Explorer.

Demostración

Puedes ver la demostración del script en el siguiente enlace: Ver demo.

Instalación

Sube todos los archivos de Sexy Lightbox a tu servidor. Las imágenes, el CSS y el Javascript. Si ubicas la carpeta imágenes en un directorio diferente, debes cambiar la ruta configurando la opción ‘imagesdir’ de la clase. Mas abajo se explica como hacerlo.

Descarga mootools con domready, e incluye los archivos Javascript en el header de tu página.

<script src="mootools.js" type="text/javascript"></script>
<script src="sexylightbox.js" type="text/javascript"></script>

Finalmente, agrega sexylightbox.css en el header:

<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />

¿Cómo se usa?

Primero debemos crear la clase, en el evento domready:

window.addEvent('domready', function() {
    new SexyLightBox();
});

Usar Sexy Lightbox es fácil, solo debes añadir la clase ’sexylightbox’ a tus enlaces:

<a href="imagen.jpg" title="algún titulo" class="sexylightbox">Ver imagen</a>

Opcional: usa la propiedad ‘title’ si quieres mostrar una descripción para la imagen.

Esta clase puede cambiarse, con la propiedad ‘find’. Lee la sección Configuración General, para aprender como hacerlo.

Si quieres crear una galería a partir de un grupo de enlaces, debes incluir el nombre de la galería en la propiedad ‘rel’:

<a href="senorms.jpg"  class="sexylightbox" rel="galeria">Enlace 1</a>
<a href="imagen.jpg"  class="sexylightbox" rel="galeria">Enlace 2</a>
<a href="cualquiera.jpg"  class="sexylightbox" rel="galeria">Enlace 3</a>

La clase SexyLightBox es muy flexible. Lee la documentación para ver todas las opciones disponibles.

Documentación

Las siguientes opciones están disponibles para la creación de la clase:

• OverlayStyles

  Estilo CSS para el background.

  new SexyLightBox({OverlayStyles:{'background-color':'#fff', 'opacity': 0.6}});

• showDuration, closeDuration

  Duración (en ms) de la transición del background.

  new SexyLightBox({showDuration:200, closeDuration:400});

Estilos del Lightbox

Sexy Lightbox trae dos versiones, una en blanco y otra en negro. Por defecto, se usa el negro, pero modificando un par de opciones puedes cambiarlo al blanco.

• color

  Admite: ‘black’ o ‘white’. Por defecto se usa ‘black’. Esta opción se utiliza para ubicar las imágenes que se usarán, en el directorio ’sexyimages’.

  new SexyLightBox({color:'white'});

• hexcolor

  Valor en hexadecimal para el color elegido. Por defecto se usa ‘#000000′.

  new SexyLightBox({color:'white', hexcolor:'#FFFFFF'});

• captionColor

  Valor en hexadecimal para el color de las descripciones. Por defecto se usa ‘#FFFFFF’.

  new SexyLightBox({color:'white', hexcolor:'#FFFFFF', captionColor:'#000000'});

Configuración general

Propiedad: find
Clase a buscar en los enlaces para aplicar el lightbox. Por defecto se usa ’sexylightbox’. Esta opción te permite crear varias instancias del lightbox y poder usar cada una en distintos enlaces.
En el siguiente ejemplo, el Enlace1 mostrará el lightbox negro, y el Enlace2 mostrará el blanco:

<script type="text/javascript">
  window.addEvent('domready', function(){
    new SexyLightBox({find:'sexylightbox'}); /* Por defecto, el color es negro */
    new SexyLightBox({find:'sexyblanquito', color:'white', hexcolor:'#FFFFFF', captionColor:'#000'});
  });
</script>

<p><a href="imagen1.jpg" class="sexylightbox">Enlace1</a></p>
<p><a href="imagen2.jpg" class="sexyblanquito">Enlace2</a></p>

Propiedad: imagesdir
Nombre del directorio que contiene las imágenes de estilo. Dentro de este directorio, se encuentran los directorios del color (black y white). Si quieres renombrar o ubicar esta carpeta en otro directorio, debes cambiar esta propiedad.

Licencia

El script es publicado bajo la licencia MIT.

Descargar

Actualización: Disponible Sexy Lightbox 2.

Sólo para propósitos históricos:
Descarga SexyLightBox.v1.zip (sin ejemplos + versión comprimida)

Descarga SexyLightBox-Example.zip (SexyLightbox.js + mootools + ejemplos)