JavaScript Image Gallery with Lightbox
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width, initial-scale=1.0">
<title>Image Gallery with Lightbox</title>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.gallery img {
width: 150px;
height: auto;
cursor: pointer;
transition: transform 0.3s ease;
}
.gallery img:hover {
transform: scale(1.05);
}
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
}
.lightbox img {
max-width: 90%;
max-height: 90%;
}
</style>
</head>
<body>
<div class=gallery>
<img src=https://via.placeholder.com/300x200 alt="Image 1" onclick=openLightbox(this)>
<img src=https://via.placeholder.com/300x200 alt="Image 2" onclick=openLightbox(this)>
<img src=https://via.placeholder.com/300x200 alt="Image 3" onclick=openLightbox(this)>
<img src=https://via.placeholder.com/300x200 alt="Image 4" onclick=openLightbox(this)>
</div>
<div class=lightbox id=lightbox onclick=closeLightbox()>
<img src alt="Lightbox Image" id=lightboxImage>
</div>
<script>
function openLightbox(image) {
const lightbox = document.getElementById('lightbox');
const lightboxImage = document.getElementById('lightboxImage');
lightboxImage.src = image.src;
lightbox.style.display = 'flex';
}
function closeLightbox() {
const lightbox = document.getElementById('lightbox');
lightbox.style.display = 'none';
}
</script>
</body>
</html>
Explanation
- HTML Structure: The gallery is composed of image elements wrapped in a container. Each image has an
onclick event that triggers the lightbox.
- The gallery is styled with flexbox to arrange images in a responsive grid.
- The lightbox is a full-screen overlay with a semi-transparent background. It centers the selected image using flexbox.
- JavaScript Functionality:
- openLightbox(image): This function displays the lightbox and sets the source of the large image to the clicked thumbnail.
- closeLightbox(): This function hides the lightbox when the overlay is clicked.
Usage
- Web Galleries: Implement this snippet on any webpage to enhance image viewing experiences.
- Responsive Design: Easily adjust CSS to fit different screen sizes and orientations.
- Customization: Extend functionality by adding image captions, navigation arrows, or animations.
This snippet demonstrates how to create an elegant and interactive image gallery with a lightbox effect, providing a useful tool for web developers aiming to improve user engagement on their websites.