Lightbox is a clone Sexy, sexier and lighter, the classic Lightbox. It was built web designers in mind, easy to install and use. This release features two versions: one white and one black.

Sexy Lightbox Mootools 1.2 framework required

installation

Upload all files to your server Lightbox Sexy. Images, CSS and JavaScript. If you place the folder images in a different directory, you must change the path by setting the option 'imagesdir' class. Below is how to do.

Download mootools with domready, including JavaScript files in the header of your page.

<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" />

How do I use?

First we create the class in the event domready:

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

Sexy Using Lightbox is easy, you just have to add the class 'sexylightbox' to your links:

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

Optional: Use the property 'title' if you want to display a description for the image.

This class can be changed, the property 'find'. Read the General Settings section to learn how.

If you want to create a gallery from a set of links, you must include the name of the gallery on the property '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>

SexyLightBox class is very flexible. Read the documentation to see all available options.
documentation

The following options are available for the creation of the class:

     OverlayStyles

     CSS Style for the background.

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

showDuration, closeDuration

Duration (in ms) the transition from the background.

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

Styles Lightbox

Sexy Lightbox brings two versions, one white and one black. By default, use the black, but changing a couple of options you can change to white.

     color

     Admits, 'black' or 'white'. The default is 'black'. This option is used to locate the images to be used, in the 'sexyimages'.

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

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

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

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

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

General Settings

Property: find
Class to find the links to apply the lightbox. The default is 'sexylightbox'. This option allows you to create multiple instances of the lightbox and be able to use each in different links.
In the following example, the link1 lightbox display the black and the white Enlace2 displayed:

<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>

Property: imagesdir
Name of the directory containing the images of style. Within this directory, the directories are of color (black and white). If you want to rename or relocate this folder to another directory, you must change this property.