Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create Image Lightbox Gallery using HTML CSS and JavaScript?
In the contemporary epoch of computational technology, the impact of visual media cannot be overemphasized in captivating and retaining the attention of your viewers. A lightbox gallery that showcases images on a web page is an influential mechanism that advances user interaction by furnishing a user-friendly and uncomplicated interface. Why not experiment with this tool and discern for yourself how it can elevate the performance of your website? With the assistance of HTML, CSS, and JavaScript, one can fabricate a bespoke image lightbox gallery that can be effortlessly integrated into a website. In this exposition, we will adopt an incremental process to forge a rudimentary image lightbox gallery that can be fine-tuned to suit your individual requisites. Whether you're a fledgling or a seasoned web developer, this guide will furnish you with the fundamental groundwork to commence.
Image Lightbox Gallery
An image lightbox gallery is a feature used on websites to display images in a larger size, in an overlay over the web page, with the option to navigate between multiple images. The user typically triggers the lightbox by clicking on a thumbnail image, and then the full-sized image appears in the lightbox. The lightbox often includes controls such as arrows to navigate between images, a close button to exit the lightbox, and possibly a caption for the image. The purpose of an image lightbox gallery is to provide a clean, elegant way for users to view images on a website, without navigating away from the main page. Image lightbox galleries are often used to display product images, galleries of images, and other types of visual content.
Approach
We will create an image lightbox gallery using HTML, CSS, and JavaScript. The HTML structure is divided into two main sections - the gallery and the lightbox. The gallery section contains a set of images displayed as thumbnails, wrapped inside "a" tags, while the lightbox section is a container that overlays the page and displays the full image. The CSS styles the gallery and lightbox. The gallery section is set to display as flex and to wrap around when the width of the container is exceeded. The lightbox section is set to have a dark background color and to center its contents both horizontally and vertically. The lightbox image is set to have a maximum width and height of 90% of the lightbox container. The close button has absolute positioning, set to 20 pixels from the top and right of the lightbox, with a font size of 30 pixels and white background color. The JavaScript code sets up event listeners on the gallery and close button to open and close the lightbox respectively. When an image thumbnail is clicked, the lightbox is displayed and the full-sized image is set as the source of the lightbox image. When the close button is clicked, the lightbox is hidden again.
To grasp the cipher, we shall scrutinize the HTML, CSS, and JavaScript segments of the code. The depiction components are structured utilizing the flexbox model in a mesh arrangement, and upon being clicked, the lightbox manifests as an entity that envelops the entire display. It constitutes a particular image and a closure button, exhibiting a translucent backdrop. Subsequent to the user selecting an image within the gallery, JavaScript hears for the click episode and showcases the associated image inside the lightbox, employing the Uniform Resource Locator as the image identifier. Clicking on the closure button initiates an additional click event, culminating in the disappearance of the lightbox and restoration of the user to the gallery.
Example
The following is the complete code which we are going to go through in this example −
<!DOCTYPE html>
<html>
<head>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery a {
display: block;
margin: 10px;
}
.gallery img{
height: 120px;
width: 120px;
}
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
justify-content: center;
align-items: center;
}
.lightbox img {
max-width: 90%;
max-height: 90%;
}
.close {
position: absolute;
top: 20px;
right: 20px;
font-size: 30px;
background-color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
}
</style>
</head>
<body>
<h4>How to Create Image Lightbox Gallery using HTML CSS and JavaScript?</h4>
<div class="gallery">
<a href="image1.jpg">
<img src="https://picsum.photos/seed/picsum/200/300" alt="Image 1">
</a>
<a href="image2.jpg">
<img src="https://picsum.photos/id/237/200/300" alt="Image 2">
</a>
</div>
<div class="lightbox">
<img src="">
<button class="close">X</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();
lightbox.style.display = 'flex';
lightboxImg.src = event.target.src || event.target.parentNode.href;
});
close.addEventListener('click', function () {
lightbox.style.display = 'none';
});
</script>
</body>
</html>
Conclusion
In summation, the establishment of a visual lightbox gallery employing HTML, CSS, and JavaScript is a comparably uncomplicated undertaking that provides ample prospects for personalization. Via the implementation of the directives itemized in this manuscript, you have the ability to expeditiously produce a visual lightbox gallery that caters precisely to the prerequisites of your website. The fusion of HTML, CSS, and JavaScript bequeaths a sturdy groundwork for erecting a dynamic, interactive image gallery that shall augment the appeal and accessibility of your website. Whether you are a neophyte or a seasoned website designer, it is my aspiration that this guide has equipped you with the prerequisite enlightenment and ingenuity to devise your own exclusive image lightbox gallery. Thus, commence your journey today and bestow a fresh dimension of optical influence to your website!
2K+ Views
