Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to Create Image Lightbox Gallery using HTML CSS and JavaScript?
An image lightbox gallery is a web feature that displays images in an enlarged overlay format, allowing users to view images without navigating away from the main page. When a user clicks on a thumbnail image, it opens in a modal window with navigation controls and a close button.
Syntax
/* Gallery container */
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* Lightbox overlay */
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
}
Key Components
A lightbox gallery consists of three main parts
- Gallery Container: Displays thumbnail images in a grid layout
- Lightbox Overlay: A full-screen modal that appears over the page
- JavaScript Controls: Handles opening, closing, and image switching
Example: Complete Lightbox Gallery
The following example creates a functional image lightbox gallery with multiple images
<!DOCTYPE html>
<html>
<head>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
padding: 20px;
}
.gallery a {
display: block;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
transition: transform 0.3s ease;
}
.gallery a:hover {
transform: scale(1.05);
}
.gallery img {
height: 150px;
width: 150px;
object-fit: cover;
display: block;
}
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
z-index: 1000;
}
.lightbox img {
max-width: 90%;
max-height: 90%;
border-radius: 10px;
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.close {
position: absolute;
top: 20px;
right: 30px;
font-size: 40px;
background: none;
border: none;
color: white;
cursor: pointer;
font-weight: bold;
}
.close:hover {
color: #ccc;
}
</style>
</head>
<body>
<h2>Image Lightbox Gallery</h2>
<div class="gallery">
<a href="#">
<img src="https://picsum.photos/seed/nature/300/200" alt="Nature Image">
</a>
<a href="#">
<img src="https://picsum.photos/seed/city/300/200" alt="City Image">
</a>
<a href="#">
<img src="https://picsum.photos/seed/ocean/300/200" alt="Ocean Image">
</a>
<a href="#">
<img src="https://picsum.photos/seed/mountain/300/200" alt="Mountain Image">
</a>
</div>
<div class="lightbox">
<img src="" alt="Lightbox Image">
<button class="close">×</button>
</div>
<script>
const gallery = document.querySelector('.gallery');
const lightbox = document.querySelector('.lightbox');
const close = document.querySelector('.close');
const lightboxImg = lightbox.querySelector('img');
gallery.addEventListener('click', function(event) {
event.preventDefault();
if (event.target.tagName === 'IMG') {
lightbox.style.display = 'flex';
lightboxImg.src = event.target.src;
lightboxImg.alt = event.target.alt;
}
});
close.addEventListener('click', function() {
lightbox.style.display = 'none';
});
lightbox.addEventListener('click', function(event) {
if (event.target === lightbox) {
lightbox.style.display = 'none';
}
});
</script>
</body>
</html>
A grid of four thumbnail images appears with hover effects. Clicking any image opens it in a full-screen lightbox overlay with a dark background, close button, and enhanced styling. Users can close the lightbox by clicking the X button or clicking outside the image.
How It Works
The lightbox functionality operates through these steps
- Gallery Setup: Thumbnail images are displayed in a flexible grid layout
- Event Listening: JavaScript listens for clicks on gallery images
- Lightbox Display: When clicked, the overlay appears with the full-size image
- Close Functionality: Users can close via button click or clicking outside the image
Conclusion
Creating an image lightbox gallery with HTML, CSS, and JavaScript provides an elegant way to showcase images on your website. This implementation offers smooth transitions, responsive design, and intuitive user controls for an enhanced viewing experience.
Updated on: 2026-03-15T16:45:28+05:30
4K+ Views
Advertisements