CSS3 nos permite un gran abanico de posibilidades con los nuevos selectores, uno de ellos es el selector “:target”, usaremos este seletor como base para crear un lightbox.

El código HTML es muy sencillo, utilizaremos un ejemplo muy simple para comprender mejor los ejemplos e iremos aumentando la estructura y la maquetación conforme avancemos en el articulo.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<div class="box">
		<a href="#image1">
			<img class="img" src="image.gif">
		</a>
		<div class="lightbox" id="image1">
			<a class="close" href="#">X</a>
			<img src="image.gif">			
		</div>
	</div>
</body>
</html>

El arbol del documento es muy fácil de entender, dentro de un elemento DIV con la clase “box” tenemos los dos elementos principales, uno es el enlace con el ancla que lleva al segundo elemento principal, que es el elemento DIV con el identificador del ancla.

Dentro del elemento “destino” al que nos lleva el ancla, que es el elemento DIV con la clase “lightbox”, tenemos un enlace y una imagen, el enlace lo utilizaremos para cerrar el Lightbox, o dicho de otra forma, el destino del enlace (#), quitará el ancla de la URL (#image1)

Ahora creamos el código CSS

*{ margin:0; padding:0;}
body{	background: #222222;}
.box { text-align:center;}
.img {margin: 2%;border: 5px solid #444444;width:300px;}
.lightbox { 
	display: none;
	outline: none;
	position: absolute;
	top: 0px;
	text-align:center;
	background: #222222;
	height: 100%;	
	width: 100%;	
	box-sizing: content-box;
}
.lightbox img { width: 50%;}
.close {
	display: block;
	top: 0px;
	right:0px;
	padding: 30px 0px;
	color: #FFFFFF;
	text-decoration:none;
	font-size: 20px;
}
/* Imagenes */
#image1:target { display: block;}

Las primeras líneas no son relevantes, en la primera eliminamos los rellenos y margenes de todo el documento, en la segunda aplicamos un color gris oscuro como fondo de la página, en la tercera centramos el contenido del contenedor principal y en la cuarta línea aplicamos un margen, un borde y una anchura a la imagen.

A partir de aquí vamos a repasar el código del CSS

.lightbox { …

Estos son los estilos que se aplicarán cuando se acceda al elemento “destino” en el propio elemento “destino”, porque además de aplicar ciertas propiedades, estas no se van a mostrar todavía ya que la primera declaración de “propiedad-valor” que hemos declarado es “display:none;”, por eso decimos que se aplicarán cuando se acceda al elemento “destino”.

#image1:target { display: block;}

Saltamos hasta la última línea del código CSS para ver el proceso que se va a ejecutar, con el selector “:target” aplicamos los estilos cuando se accede al elemento destino, por lo tanto, el elemento con identificador “image1”, se mostrará junto con el resto de estilos que aplicamos a la clase “lightbox”, ya que es el mismo elemento, lo hacemos de esta forma para poder añadir más imagenes posteriormente y crear una galeria de imagenes con solo añadir una línea más de código CSS por imagen insertada (#image2:target {…#image3:target { …)

.close { …

Este enlace se encuentra dentro del elemento con identificador “image1”, por lo que no se mostrará hasta que se muestre dicho elemento, los estilos aquí no son relevantes, si lo es el código HTML, el valor del atributo “href” es “#”, por lo que cuando pulsemos el enlace, se eliminará el ancla de la URL (#image1).

Como vimos anteriormente, el ejemplo está preparado para poder incluir mas imágenes y construir una galería de forma sencilla, para ello añadiremos al código del documento HTML tantos elementos iguales dentro del contenedor con clase “box”, como imagenes contenga la galería, copiamos y pegamos sustituyendo las rutas que correspondan a cada imagen, y lo mas importante, sustituir el ancla y el identificador en cada uno de ellos

Ejemplo

<div class="box">
	<a href="#image">
		<img class="img" src="image.gif">
	</a>
	<div class="lightbox" id="image">
		<a class="close" href="#">X</a>
		<img src="image.gif">			
	</div>
	<a href="#image2">
		<img class="img" src="image2.gif">
	</a>
	<div class="lightbox" id="image2">
		<a class="close" href="#">X</a>
		<img src="image2.gif">			
	</div>
	<a href="#image3">
		<img class="img" src="image3.gif">
	</a>
	<div class="lightbox" id="image3">
		<a class="close" href="#">X</a>
		<img src="image3.gif">			
	</div>
</div>

Y ahora añadiriamos al final del código CSS las siguientes líneas:

#image2:target { display: block;}
#image3:target { display: block;}

Por último solo quedaría añadir nuestro propios estilos e imagenes, he preparado un ejemplo con algunos estilos añadidos, el código es simple, legible y fácil de modificar, tan solo dispone de dos imagenes, mas que suficiente para comprobar su funcionamiento y poder adaptarlo a nuestro gusto.

Puedes descargar el ejemplo completo en mi cuenta de Github

Valoraciones


Sé el primero en valorar

* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

Utilizamos cookies propias necesarias para el correcto funcionamiento de la web y personalizar el contenido. No utilizamos cookies de terceros ni guardamos información personal sobre ti. Puedes encontrar más información en nuestra Política de cookies.

ACEPTAR
Aviso de cookies