Sexy Lightbox 2

Eduardo 12 October 2008 404 comentarios En: Javascript

Sexy Lightbox is a more lightweight and sexier clone of the classic Lightbox. It was constructed thinking about web designers, easy installation and use.

This version is now compatible with images and HTML elements!

Release notes

Now, Sexy Lightbox is compatible with HTML! That means that you can show elements, pages, videos, and all what you want!

Also, large images (very large images ) are automatically adjusted to window.

Now: Areamaps compatible!

Sexy Lightbox 2 requires Mootools 1.2.3 or jQuery 1.3.2, and is compatible with all modern browsers (and Internet Explorer).

6, 7, 8

3.0, 3.5

3

9.64, 10

4

Demo

You can view the demo here:

• Mootools – Black
• Mootools – White
• jQuery – Black
• jQuery – White

Compatibility:

SexyLightbox 2 is compatible with the following lightboxes, because it was constructed using the same logic:

• Lightbox 2
• Slimbox
• Milkbox
• Mostrar HTML basado en Smoothbox

Note: This version is NOT compatible with Sexy Lightbox 1.

Installation

Upload all Sexy LightBox 2 files to your host. The images, CSS and Javascript, if you locate the images folder in a different directory you should change the path in the “dir” parameter in the class. Below explains how

Write the following code between the HEAD tag in your page:
For Mootools:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js"></script>

<script type="text/javascript" src="sexylightbox.v2.3.mootools.js"></script>
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />

Atention: To save bandwidth, you can use the compressed version of SexyLightBox, you should to include the file “sexylightboxv.2.3.motools.min.js”

For jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>

<script type="text/javascript" src="sexylightbox.v2.3.jquery.js"></script>
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />

Atention: To save bandwidth, you can use the compressed version of SexyLightBox, you should to include the file “sexylightboxv.2.3.jquery.min.js”

Finally, add the following code just below of the last lines:

For MooTools:

<script type="text/javascript">
  window.addEvent('domready', function(){
    SexyLightbox = new SexyLightBox();
  });
</script>

For jQuery:

<script type="text/javascript">
  $(document).ready(function(){
    SexyLightbox.initialize();
  });
</script>

How to use?

To use Sexy Lightbox 2 is easy! just add the property rel=”sexylightbox” to your links:

<a href="imagen.jpg" title="some title" rel="sexylightbox">View image</a>

Optional: Use the “title” property if you want to show a description for the image.

The keyword “sexylightbox” can be changed with the “find” property. Read the section General config to learn how to do it.

If you want to create a galery from a links group, you should include the gallery name between brackets in the property “rel”:

<a href="senorms.jpg"     rel="sexylightbox[galeria]">Link 1</a>
<a href="imagen.jpg"      rel="sexylightbox[galeria]">Link 2</a>
<a href="cualquiera.jpg"  rel="sexylightbox[galeria]">Link 3</a>

There is no limit in the galeries quantity.

There are 3 ways to show HTML content in the lightbox:

• AJAX

  This is the default way. Parameters “width” & “height” are required:

  The following code will not work:

        <a href="http://www.yoursite.com/view.php" rel="sexylightbox">
          Link 1
        </a>
        

  The correct way is specifying the height and width:

        <a href="http://www.yoursite.com/view.php?width=400&height=200" rel="sexylightbox">
          Link 1
        </a>
        

• Iframe

  Besides the “width” and “height” you should pass the parameter “TB_iframe”:

        <a href="http://www.yoursite.com/view.php?TB_iframe=1&width=400&height=200" rel="sexylightbox">
          Link 1
        </a>
        

• Inline

  The link should start with “#TB_inline?inlineId=ID” where ID is the id of wrapper who has the HTML to show.

        <div id="MyHTML"> Example </div>
  
        <a href="#TB_inline?inlineId=MyHTML&height=125&width=350" rel="sexylightbox">
          Link 1
        </a>
        

HTML content and Images support the following parameters:

• modal

  Setting modal=1 the lightbox will be close only clicking the button “close”, disabling the click event to overlay

        <a href="image.jpg?modal=1" rel="sexylightbox">Link 1</a>
        

• background

  Set the background color to the lightbox. Very useful when the HTML content loaded has a different background than white.

        <a href="#TB_inline?inlineId=MyHTML&height=125&width=350&background=#00FF00" rel="sexylightbox">Link 1</a>
        

• title

  Show a legend below the content or image. Using this method it’s not possible insert html in the legend.

        <a href="imagen.jpg?title=Verano del 98" rel="sexylightbox">Link 1</a>
        

The SexyLightbox class is very flexible. Read the following documentation to view all available options.

Documentation

The following options are available for the class creation:

Background Styles

• OverlayStyles

  The css style is for the black background (it’s fade). You can change the color and the opacity.

  For MooTools:

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

  For jQuery:

          SexyLightbox.initialize({
            OverlayStyles:{
              'background-color':'#fff',
               'opacity': 0.6
            }
          });
          

LightBox Styles

Sexy Lightbox has two releases, the white and a black one. By default, it uses the black, but you can configure it to use it with white.

• color

  It admits: “black”, “white”, “blanco” or “negro”. By default it uses “black”. This option is used to locate images that will be used in the directory “sexyimages”.

  For MooTools:

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

  For jQuery:

  SexyLightbox.initialize({color:'white'});

• emergefrom

  It admits: “top” or “bottom”. By default it uses “top”. If you want the lightbox display “from bottom” use “bottom”.

  MooTools:

  SexyLightbox = new SexyLightBox({emergefrom:'bottom'});

  jQuery:

  SexyLightbox.initialize({emergefrom:'bottom'});

• find

  Keyword used to search in the links where lightbox is going to be applied. By default is used “sexylightbox”. This option allows you to create different instances of lightbox and it can use each one in different links. Also, it allows the compatibility with the original lightbox, the keyword is “lightbox”.

  MooTools:

  SexyLightbox = new SexyLightBox({find: 'lightbox'});

  jQuery:

  SexyLightbox.initialize({find: 'lightbox'});

• dir

  Name of the directory that contains the images style. In this directory, you can found the colors directory (black and white). If you want to rename or relocate this directory in another folder, you should change this property.

  MooTools:

            SexyLightbox = new SexyLightBox({dir: 'folderimages'});
        

  jQuery:

            SexyLightbox.initialize({dir: 'folderimages'});
        

Example Configuration

MooTools:

  window.addEvent('domready', function(){
    SexyLightbox = new SexyLightBox({
      find          : 'sexylightbox', // rel="sexylightbox"
      color         : 'negro',
      dir           : 'http://www.yoursite.com/images/',
      emergefrom    : 'bottom',
      OverlayStyles : {
        'background-color': '#FF0000',
        'opacity' : 0.3
      }
    });
  });

jQuery:

  $(document).ready(function(){
    SexyLightbox.initialize({
      find          : 'sexylightbox', // rel="sexylightbox"
      color         : 'negro',
      dir           : 'http://www.yoursite.com/images/',
      emergefrom    : 'bottom',
      OverlayStyles : {
        'background-color': '#FF0000',
        'opacity' : 0.3
      }
    });
  });

Functions

You can access to the lightbox from javascript, thru the following functions:

• close

  Close the lightbox (if is open).

  SexyLightbox.close();

• shake

  Shake the lightbox. Useful to show any error.

  SexyLightbox.shake();

• refresh

  Scans the DOM again looking for new links, to be opened with lightbox.

  SexyLightbox.refresh();

• display

  display(url, title, force)

  Opens the lightbox in the url sent. The “force” parameter (force=’image’), forces to show the lightbox as an image.

  SexyLightbox.display('images/mysql.jpg');

  SexyLightbox.display('images/captcha.php', '', 'image');

Known Issues

Animated gifs doesn’t work in Opera
It’s an Opera’s problem, that doesn’t fire the “onload” event when the gif is loaded. Nevertheles, once the gif is stored in cache, the event is fired correctly, so the image is shown with no problems. In other words, it doesnt have a solution.

The flash object is shown over the “overlay”

To solve this, you have to change the property wmode to transparent or opaque.
If you are using Adobe’s script, you should have something like:

AC_FL_RunContent( 'codebase', 'http...', 'pluginspage', 'http...', 'width', '999', 'height', '999', 'src', 'images/home', 'movie', 'images/home', 'quality', 'high', 'wmode', 'transparent' ); //end AC code

var so = new SWFObject("home.swf", "home", "999", "999", "9", "#222222");
so.addParam("allowfullscreen", "true");
so.addParam("allowScriptAccess", "always");
so.addParam("wmode","transparent");

If not, you are using the flash object as it is, you should have something like:
Notice that “wmode” is included in the embed and as “param”

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http..." width="999" height="999">
  <param name="movie"   value="images/home.swf" />
  <param name="quality" value="high" />
  <param name="wmode"   value="transparent" />
  <embed src="images/home.swf" width="999" height="999" quality="high" pluginspage="http..." type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>

Overlay opens but previous, next, and/or close links are missing

• Make sure the files are actually on the server where you think they are, then double check the links in your header. Using absolute links (”http://…”) may help sort out buggy relative paths.
• Make sure you’re not using Prototype.
• Make sure the images are where you think they are.

License

The script is published under the license MIT.

Demo

You can view the demo here:

• Mootools – Black
• Mootools – White
• jQuery – Black
• jQuery – White

¿How much?

Nothing . But you can collaborate, buying me a coffee

Download

Changelog

Sexy Lightbox 2.3.4 - Noviembre 10, 2009
* BugFixed: Corregida la compatibilidad con la propiedad "dir" y "sexyimages" en jQuery

Sexy Lightbox 2.3.3 - Octubre 30, 2009
* BugFixed: Corregida la compatibilidad con la propiedad "dir" y "sexyimages"

Sexy Lightbox 2.3.2 - Octubre 29, 2009
* BugFixed: En IE6 con el shim se quedaba en "cargando..."
* BugFixed: Corregido el sistema de galería, que se arruinó en la anterior versión xD.

Sexy Lightbox 2.3.1 - Octubre 28, 2009
* BugFixed: Arreglado el error en Safari/Chrome cuando el tamaño de la ventana
            era menor que la del documento el overlay no tapaba todo, con jQuery.
* BugFixed: Arreglado el error cuando no había titulo pero si era galería, el alto no
            correspondía al alto de la imagen.
* BugFixed: Eliminada la función stopImmediatePropagation en la versión de jQuery.

Sexy Lightbox 2.3 - Octubre 15, 2009
* Featured: Clase Overlay reescrita desde 0 basada en la oficial de mootools
* Featured: Nuevo estilo visual para Black & White
* Featured: Nueva propiedad "emergefrom"
* Featured: Las imágenes pueden abrirse con un tamaño fijo, al igual que el contenido html
* Featured: Se precargan las imagenes del estilo, antes de mostrar el lightbox
* BugFixed: zIndex cambiado a 32000 para compatibilizar con SexyAlertBox
* BugFixed: propiedad "imagesdir" sustituída por "dir"
* BugFixed: El lightbox ya no aparece del top=0, sino de arriba del scroll,
            dando un efecto mas suave al movimiento.
* BugFixed: Función "display" cambiada a "animate"
* BugFixed: ahora el ajax recibe el parámetro background
* BugFixed: ahora el Overlay recibe el tamaño correcto en Chrome
* BugFixed: Flash & Selects no se ocultan. Si desea ocultar un flash debe establecer
            la propiedad wmode=transparent manualmente.
* BugFixed: Tamaño de imagenes y html se setean correctamente ahora.

Sexy Lightbox 2.2 - Junio 1, 2009
* Featured: Rounded corners more smooth
* Featured: Nueva función Refresh().
* Featured: Nueva función Shake().
* Featured: Agregado Modalbox style.
* BugFixed: El contenido/iframe permanecían con el background de la imagen anterior.
* BugFixed: Background negro en Loading, después de ver un video.
* BugFixed: Ajax 404 error.
* Now Compatible with mootools 1.2.2
* Now Compatible with jQuery 1.3.2

Sexy Lightbox 2.1 - Febrero 20, 2009
* Featured: Se ejecuta el js que se incluyan con el ajax.
* Featured: Compatibilidad con teclado (Flechas y tecla ESC)
* Featured: Ahora los contenidos html se pueden agrupar en galerias.
* Featured: Ahora puedes especificar el color de fondo del Lightbox.
* Featured: Si la página pedida por ajax no existe, devuelve 404.
* BugFixed: Posición centrado absoluto.
* BugFixed: IE7 Bug Scroll con overflow:auto.
* BugFixed: Los elementos flash (video), ya no se siguen reproduciendo.
* BugFixed: Arreglado el bug de posición. Ahora el lightbox siempre vendrá de arriba.
* BugFixed: Google Chrome mostraba 2px más de lo que debía.
* Arreglado el CSS para mas compatibilidad.
* Ahora la altura y ancho especificados son del innerDIV y no del Lightbox en total.
* Los eventos se han eliminado.
* El código se ha ordenado listo para codearlo en jQuery.
* Nueva función Close() para cerrar el lightbox.

Sexy Lightbox 2.0.1 - Octubre 15, 2008
* Arreglada Compatibilidad con Opera (overflow: 'visible')
* Posibilidad de agregar código HTML en la propiedad Title

Sexy Lightbox 2.0.0 - Octubre 12, 2008
* Versión Inicial 2