Sexy Lightbox 2

Eduardo 12 Octubre 2008 404 comentarios En: Javascript

Sexy Lightbox 2 es un clon, más sexy y más liviano, del clásico Lightbox. Esta versión es compatible con imágenes, y elementos HTML!

Novedades de la versión

Ahora, Sexy Lightbox es compatible con HTML! quiere decir que vas a poder mostrar elementos, páginas, videos, y todo lo que quieras meter, dentro del lightbox!

Además, ahora las imágenes grandes (hablamos de imágenes muy grandes ) se ajustan automáticamente al tamaño de la ventana del navegador.

Compatibilidad con areamaps agregada!

Sexy Lightbox 2 requiere el framework Mootools 1.2.2 o jQuery 1.3.2 y funciona tanto en navegadores modernos, como en Internet Explorer.

6, 7, 8

3.0, 3.5

3

9.64, 10

4

Demostración

Puedes ver la demostración del script en los siguientes enlaces:

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

Compatibilidad:

SexyLightbox 2 es compatible con los siguientes lightbox, ya que fue construido usando la misma lógica:

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

Nota: Ésta versión 2 NO es compatible con Sexy Lightbox 1.

Instalación

Sube todos los archivos de Sexy Lightbox 2 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 “dir” de la clase. Mas abajo se explica como hacerlo.

Escribe el siguiente código entre las etiquetas HEAD de tu página:
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" />

Atención: Para ahorrar ancho de banda, puedes usar la versión comprimida de SexyLightbox, para ello en vez de incluir el archivo “sexylightbox.v2.3.mootools.js”, debes poner este: “sexylightbox.v2.3.mootools.min.js”

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

Atención: Para ahorrar ancho de banda, puedes usar la versión comprimida de SexyLightbox, para ello en vez de incluir el archivo “sexylightbox.v2.3.jquery.js”, debes poner este: “sexylightbox.v2.3.jquery.min.js”

Finalmente, agrega la siguiente declaración justo debajo de las lineas anteriores:

MooTools:

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

jQuery:

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

¿Cómo se usa?

Usar Sexy Lightbox 2 es fácil! solo debes añadir la propiedad rel=”sexylightbox” a tus enlaces:

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

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

La palabra clave “sexylightbox” 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 entre corchetes en la propiedad “rel”:

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

No hay limites en la cantidad de galerías.

Hay 3 maneras de mostrar contenido HTML en el lightbox:

• AJAX

  Esta es la manera predeterminada de mostrar contenido. Los parametros “width” y “height” son obligatorios:

  El siguiente código no funcionará:

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

  Para abrir el lightbox se debe especificar el alto y el ancho:

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

• Iframe

  Además del “width” y “height” se debe pasar el parametro “TB_iframe”:

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

• Inline

  En enlace debe comenzar con “#TB_inline?inlineId=ID” donde ID es el id del contenedor que contiene el código HTML a mostrar.

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

Tanto el contenido HTML como las imagenes admiten los siguientes parámetros:

• modal

  Estableciendo modal=1 el lightbox sólo se cerrará clickeando en el botón “Close”, desactivando el evento click al overlay.

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

• background

  Establece el color de fondo al lightbox. Muy útil cuando el contenido HTML cargado contiene un fondo distinto al blanco.

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

• title

  Muestra una leyenda debajo del contenido o imagen. Por este método no es posible ingresar html en la leyenda.

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

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

Documentación

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

Estilos del Background

• OverlayStyles

  Estilo CSS para el background negro (el que hace el fade). Puedes cambiar el color y la opacidad.

  MooTools:

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

  jQuery:

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

Estilos del Lightbox

Sexy Lightbox trae dos versiones, una en blanco y otra en negro. Por defecto, se usa el negro, pero puedes configurarla para usarla en blanco.

• color

  Admite: “black”, “white”, “blanco”, “negro”. Por defecto se usa “black”. Esta opción se utiliza para ubicar las imágenes que se usarán, en el directorio “sexyimages”.

  MooTools:

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

  jQuery:

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

• emergefrom

  Admite: “top”, “bottom”. Por defecto se usa “top”. Si quieres que el lightbox aparezca “desde abajo” utiliza “bottom”.

  MooTools:

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

  jQuery:

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

• find

  Palabra clave 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. Además, permite la compatibilidad con Lightbox original, cuya palabra clave es “lightbox”.

  MooTools:

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

  jQuery:

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

• dir

  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.

  MooTools:

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

  jQuery:

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

Ejemplo de configuración

Para quitar todas las dudas, se incluye a continuación un ejemplo de la configuración total que permite el script:
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
      }
    });
  });

Funciones

Puedes acceder al lightbox desde Javascript, mediante las siguientes funciones:

• close

  Cierra el lightbox (si es que está abierto).

  SexyLightbox.close();

• shake

  Sacude el lightbox. Útil para mostrar algún error.

  SexyLightbox.shake();

• refresh

  Vuelve a escanear el DOM en busca de nuevos enlaces, para abrir con lightbox.

  SexyLightbox.refresh();

• display

  display(url, title, force)

  Abre el lightbox en la url enviada. El parametro “force” (force=’image’) fuerza a mostrar el lightbox como una imagen.

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

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

Problemas conocidos

Gifs animados no se ven en Opera
Esto es un problema de Opera, que no lanza el evento onload cuando se termina de cargar el gif. Sin embargo, una vez que se almacena en el caché, el evento es lanzado correctamente, por lo que la imagen se muestra sin problemas. En resumen No tiene solución.

El flash se muestra por encima del overlay
Para solucionar esto, debes cambiar la propiedad wmode a transparent u opaque.
Si estas usando el script de adobe, deberías tener algo como esto:

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");

Si por el contrario estas agregando Flash a lo macho, deberías tener algo como esto:
Nota que el wmode se incluye en el embed y como 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>

Licencia

El script es publicado bajo la licencia MIT.

Demostración

Puedes ver la demostración del script en los siguientes enlaces:

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

¿Cuanto cuesta?

Nada. Pero puedes colaborar comprandome un café

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