Scribd
Upload
5 views1 page

Doctype HTML

The document is an HTML structure for a photo gallery titled 'Galería de Fotos'. It includes a section for displaying images and a lightbox feature that allows users to view images in a larger format when clicked. Additionally, there is a JavaScript code that manages the lightbox functionality by displaying and hiding it based on user interactions.

Uploaded by

darismilmarte123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views1 page

Doctype HTML

The document is an HTML structure for a photo gallery titled 'Galería de Fotos'. It includes a section for displaying images and a lightbox feature that allows users to view images in a larger format when clicked. Additionally, there is a JavaScript code that manages the lightbox functionality by displaying and hiding it based on user interactions.

Uploaded by

darismilmarte123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Galería de Fotos</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Galería de Fotos</h1>
<div class="gallery">
<img src="images/foto1.jpg" alt="Foto 1">
<img src="images/foto2.jpg" alt="Foto 2">
<img src="images/foto3.jpg" alt="Foto 3">
</div>
<div class="lightbox" id="lightbox">
<img id="lightbox-img" src="">
</div>
<script src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Galería de Fotos</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Galería de Fotos</h1>
<div class="gallery">
<img src="images/foto1.jpg" alt="Foto 1">
<img src="images/foto2.jpg" alt="Foto 2">
<img src="images/foto3.jpg" alt="Foto 3">
</div>
<div class="lightbox" id="lightbox">
<img id="lightbox-img" src="">
</div>
<script src="script.js"></script>
</body>
</html>
const images = document.querySelectorAll('.gallery img');
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightbox-img');

images.forEach(img => {
img.addEventListener('click', () => {
lightbox.style.display = 'flex';
lightboxImg.src = img.src;
});
});

lightbox.addEventListener('click', () => {
lightbox.style.display = 'none';
});

You might also like