Lightbox es un script muy popular: imágenes emergentes que permite mostrar imágenes y contenido en ventanas que se superponen sobre todo el web. Este script y otros que tienen la misma funcionalidad están basados en frameworks Javascript, esta vez crearemos el efecto Lightbox pero sin necesidad de scripts adicionales, es decir, haciendo uso simplemente de CSS:
Un poco de teoría
Esta técnica fue originalmente explicada en Create a Lightbox effect only with CSS – no javascript needed en donde se explica que este efecto de mostrar un div que sobreponga todo el html, se puede conseguir con dos divs, uno de los cuales servirá para obscurecer todo el contenido del web y se mostrará en el 100% de la pantalla y el segundo en donde se mostrará el contenido deseado.
Creando el Lightbox
Entonces para crear nuestro Lightbox, creamos un html en donde incluimos dos divs que utilizamos para el efecto deseado.
<div id=”over”>Contenido Lightbox</div>
<div id=”fade”> </div>
El siguiente paso es crear los estilos para estos dos elementos, para ello creamos dos estilos: fadebox que se muestra en toda la pantalla con color de fondo negro al 80% de opacidad y overbox que se muestra en medio de la pantalla, estos dos elementos están inicialmente ocultos.
.fadebox {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.overbox {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
z-index:1002;
overflow: auto;
}
El siguiente paso es crear los botones para mostrar/ocultar el lightbox, para ello creamos dos enlaces que llamarán a dos funciones javascript, estas funciones simplemente cambiarán los estilos asociados a los dos divs para mostrarlo u ocultarlo.
<a href=”javascript:showLightbox();”>Show LightBox</a>
<a href=”javascript:hideLightbox();”>HideLightBox</a>
Unimos estos elementos ya ya tenemos nuestro Lightbox funcionando, pueden ver el ejemplo funcionando en CSS Lightbox.
Mejorando el Lightbox
Ahora esta funcionalidad es muy básica, se le podría agregar la posibilidad de definir las dimensiones de la ventana, para ello haría falta calcular el tamaño de la pantalla y según ello posicionarla. Otro de los adicionales que podríamos hacer es que cuando se haga click fuera de la ventana emergente se cierre el Lightbox, esto se hace agregando un detector de eventos para el click. Otra posibilidad es agregarle un efecto de transición al momento de mostrar la ventana.
