fbpx
León Desarrollo - Programación WordPress
Perro programando

Crear efecto lightbox con HTML5


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">&times;</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.

Suscríbete

Si quieres estar al día con las novedades de este sitio te recomiendo que te suscribas.

Comentarios

Deja un comentario


Puede que también te interese

2018 animaciones animación Aranda array atributos añade base de datos buscar categoría css curso diseño Duero emprendimiento fechas fiduero guía imagen imagenes inauguracion instalar Isilla javascript linux local mac node.js pagina pagina web php post problemas producto servicio servidor solución split sql sql server stock string windows woocommerce wordpress

abril 2024
L M X J V S D
1234567
891011121314
15161718192021
22232425262728
2930  
  1. Hola, Muchas gracias por ofrecernos este contenido de calidad, es muy difícil encontrar contenido así en nuestro idioma. Aprovechando este…