csslightbox1

Una manera sencilla de crear un lightbox para mostrar nuestras imágenes redimensionadas, de forma sencilla, y solo mediante CSS.

Pasos a seguir:

  1. Este es el código CSS a manejar:
    2. img {
border: 1px solid #ccc;
padding: 3px;
margin: 0 1em 0 1em;
}
div.lb img {
margin-top: 4em;
padding: 2em;
background: #fff;
}
div.lb {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
text-align: center;
background: url('screen.png');
}
div.lb:target {
display: block;
}
/** IE no soporta :target, así que usaremos expresiones CSS **/
div.lb {
display: expression((document.location.toString().split('#').slice(1) == this.
id)?'block':'none');
}

    Como vemos, consta de un div en forma de bloque para poder ver la imagen en tamaño real, así como una imagen llamada en este caso, “screen.png” si queremos mostrar algún fondo (si no se mostrará opaco). Internet Explorer no soporta el atributo :target, así que usaremos expresiones regulares de CSS.

  2. Ahora deberemos irnos a nuestro documento HTML y pegar esto:

    3. Este código será para mostrar las miniaturas:

    <a href="#lb4"><img src="4s.jpg" alt="LightBox" align="left"></a>
<a href="#lb1"><img src="1s.jpg" alt="LightBox" align="right"></a>
<a href="#lb2"><img src="2s.jpg" alt="LightBox" align="left"></a>
<a href="#lb3"><img src="3s.jpg" alt="LightBox" align="right"></a>

    Y este será para las imágenes reales:

    <div id="lb1" class="lb"><a href="#top"><img src="1.jpg" alt=""></a></div>
<div id="lb2" class="lb"><a href="#top"><img src="2.jpg" alt=""></a></div>
<div id="lb3" class="lb"><a href="#top"><img src="3.jpg" alt=""></a></div>
<div id="lb4" class="lb"><a href="#top"><img src="4.jpg" alt=""></a></div>
  3. Y listo, ya tendremos nuestro lightbox ligero hecho completamente mediante CSS. Se puede ver un ejemplo de su funcionamiento.



Sigue la onda…

Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!