Sexy Lightbox v1

View this post in Español


Note: This post is deprecated. New version is here: 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)

I’m not sure what you have against “The Five”. I mean, four of the five panel members are on the right. The only creep is Bob Beckel. I admit, his creepiness makes the show a bit harder to handle. But Greg Gutfeld makes up for it! I LOVE him!! Beckel will probably have a stroke or a heart attack on the show one day and they can just shove him off the stage and continue on.,

In relation to the Technorati rank it’s pulled down via an API (geez I think that’s what it’s called) as is Alexa rank & the script calculates the index – I just need to record the figures in a spreadsheet for upload.,

Chloe_Ohio says:

It makes sense about not continuing with “business as usual”

I always wondered if the Manchurian Candidate

Lily_Alaska says:

I always wondered if the Manchurian Candidate

I’m not sure what you have against “The Five”. I mean, four of the five panel members are on the right. The only creep is Bob Beckel. I admit, his creepiness makes the show a bit harder to handle. But Greg Gutfeld makes up for it! I LOVE him!! Beckel will probably have a stroke or a heart attack on the show one day and they can just shove him off the stage and continue on.,

I always wondered if the Manchurian Candidate

Yon10 says:

Hola buen dia!! con esto es posible poner dentro del sexylightbox el contenido de un html?? es decir sera posible poner un form o solo funciona con imagenes?

Gracias!!!

Saludos!!