Un efecto lightbox es una forma popular de mostrar imágenes en una capa flotante superpuesta sobre el contenido principal cuando se hace clic en una imagen. Esto permite al usuario ver la imagen en detalle sin abandonar la página principal. Puedes lograr este efecto con HTML, CSS y JavaScript. Aquí tienes un ejemplo de cómo hacerlo:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Efecto Lightbox</title>
</head>
<body>
<div class="gallery">
<img src="imagen1.jpg" alt="Imagen 1" class="lightbox-trigger">
<img src="imagen2.jpg" alt="Imagen 2" class="lightbox-trigger">
<!-- Agrega más imágenes si es necesario -->
</div>
<!-- Lightbox -->
<div class="lightbox" id="lightbox">
<span class="lightbox-close" id="lightbox-close">×</span>
<img src="" alt="" class="lightbox-content" id="lightbox-content">
</div>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css):
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.gallery {
display: flex;
flex-wrap: wrap;
}
.gallery img {
max-width: 100%;
height: auto;
margin: 10px;
cursor: pointer;
}
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
text-align: center;
}
.lightbox-content {
max-width: 90%;
max-height: 90%;
margin: auto;
display: block;
}
.lightbox-close {
position: absolute;
top: 20px;
right: 20px;
font-size: 30px;
cursor: pointer;
color: #fff;
}
JavaScript (script.js):
const lightbox = document.getElementById("lightbox");
const lightboxContent = document.getElementById("lightbox-content");
const lightboxClose = document.getElementById("lightbox-close");
const triggers = document.querySelectorAll(".lightbox-trigger");
triggers.forEach(trigger => {
trigger.addEventListener("click", () => {
const img = trigger.cloneNode(true);
lightboxContent.innerHTML = "";
lightboxContent.appendChild(img);
lightbox.style.display = "block";
});
});
lightboxClose.addEventListener("click", () => {
lightbox.style.display = "none";
});
lightbox.addEventListener("click", (event) => {
if (event.target === lightbox) {
lightbox.style.display = "none";
}
});
Este código crea un efecto lightbox simple. Cuando se hace clic en una imagen con la clase lightbox-trigger, se clona y muestra en el lightbox. El lightbox se cierra haciendo clic en la «X» o en cualquier lugar fuera de la imagen. Puedes agregar más imágenes a la galería simplemente duplicando la línea <img src="imagenX.jpg" alt="Imagen X" class="lightbox-trigger"> en el HTML.
Deja un comentario