Resulta que hay muchas lightbox (de jQuery o Mootools o el framework javascript que se les ocurra), pero el problema de estos es que estos no permiten una fácil modificación (diseño) de la caja.

Este problema se me presento en el trabajo y pues a hacer un lightbox desde cero. De hecho no es difícil ya que solo se necesita hacer esto:

  1. Ocultar (o sobre poner algo en) el contenido de la página
  2. Mostrar la caja (con el diseño personalizado)
  3. Cerrar la caja y volver a mostrar el contenido

¿Fácil? Yo digo que sí, el problema de los plugins en los frameworks es que vienen mucho más poderosos que esta solución. El desarrollo anterior lo vamos a hacer sobre jQuery (porque con ese trabajo).

(X)HTML (en rojo la estructura del lightbox)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test LightBox</title>
</head>

<body>
<div id="info">informacion
    <ul>
    <li><a href="#" id="startBL">abrir</a></li>
    </ul>
</div>

<div id="lbOverLay"></div>
<div id="wpLb">
    <a id="wpLbClose" href="#">cerrar</a>
    <div id="wpLbHd">informaciom</div>
</div>
</body>
</html>

CSS (del lightbox)

div#lbOverLay {
	background: #99CCFF;
	display: none;
	height: 700px;
	opacity: 0.6;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 3000;
}
/* No muestra la transparencia en IE6 */
* html div#lbOverLay {
	filter: alpha(opacity = 50);
}
div#wpLb {
	background: url(lb_bg.png) no-repeat center center;
	display: block;
	height: 550px;
	left: 50%;
	margin: 0 0 0 -225px;
	position: absolute;
	top: -550px;
	width: 450px;
	z-index: 3001;
}
div#wpLb a#wpLbClose {
	background: url(lb_close.png) no-repeat center center;
	height: 40px;
	position: absolute;
	right: 70px;
	text-indent: -999em;
	top: 65px;
	width: 40px;
}
div#wpLb div#wpLbHd {
	left: 50%;
	margin: 0 0 0 -160px;
	position: absolute;
	top: 140px;
}

jQuery

Primero algunas definiciones de variables:

//div que se va a sobreponer sobre el contenido
var wpLbOver = jQuery('div#lbOverLay');
//div que contendrá la información (diseño)
var wpLb = jQuery('div#wpLb');
//enlace para cerrar el lightbox
var lbClose = jQuery('a#wpLbClose');
//div que posiciona la información
var wpLBCt = jQuery('div#wpLbHd');

//enlace para abrir el lightbox
var lbOpen = jQuery('a#startBL');

//variable que maneja la posición donde aparecerá el lightbox (vertical)
var topStart = 0;

Ahora vamos a poner la funcionalidad, ocultar y mostrar el lightbox (1 y 2)

//abrir el lightbox
lbOpen.click(function() {
    //sobre poner una capa
    wpLbOver.css({
        'width': jQuery(window).width(),
        'height': jQuery(document).height(),
        'left': -(($(window).width() - $('body').width()) / 2)
    }).fadeIn(function() {
        //iniciar la posición de la caja
        wpLb.css({
            'display': 'block',
            'top': topStart - wpLb.height()
        });
        //animar su entrada
        wpLb.animate({'top': topStart - 20},500,function() {
            wpLb.animate({'top': topStart - 50},250,function() {
                wpLb.animate({'top': topStart - 20},250);
                //cargar contenido
                wpLBCt.load(lbOpen.attr('href'));
            });
        });
    });
});

Cerrar la ventana (3):

//cerrar el lightbox
lbClose.click(function() {
    //desaparecer el box
    wpLb.animate({'top': topStart - wpLb.height()},500,function() {
        wpLbOver.fadeOut();
        //ocultar la capa sobre puesta
        wpLb.css({'display': 'none','top': - wpLb.height()});
    });
    return false;
});

¿Y dónde lo puedo ver?

Por desgracia no tengo un lugar en la internet para ponerles el demo, pero les dejo el lightbox.zip con el demo de esto funcionando (y una imagen bastante mala de la caja).

TO DO

  1. Generar los div’s del lightbox de manera dinámica.
  2. Generar un plugin para jQuery, para poder usarlo como jQuery(‘selector’).LightBox();
  3. Poder obtener de manera dinámica el tipo de contenido a mostrar (desde el enlace que abre el lightbox)
  4. Merjorar la animación, ya que si se quieren hacer cosas más elaboradas habría que escribir mucho código
  5. Revisar si para cualquier estructura/estilo (X)HTML funciona la sobreposición de la capa
  6. Arreglar la capa sobrepuesta en IE6 (no muestra la transparencia)
  7. Hacerlo con otros frameworks
Anuncios