Easy gallery lightbox with jQuery
In this tutorial, I will show you how to create an easy, simple image gallery lightbox using jQuery, Html and Css without a plugin.
1. Add images
Add a container and some placeholder images from lorem picsum:
<div class="gallery">
<img src="https://picsum.photos/600">
<img src="https://picsum.photos/599">
<img src="https://picsum.photos/598">
<img src="https://picsum.photos/597">
<img src="https://picsum.photos/596">
<img src="https://picsum.photos/595">
<img src="https://picsum.photos/594">
</div>
2. Add the lightbox
Create a the lightbox with the basic buttons (close, next, prev) and an empty image, and place it just above the closing </body> tag:
<div id="lightbox">
<div class="close">x</div>
<div class="prev"><</div>
<div class="next">></div>
<img src="#">
</div>
3. Style the gallery
Add some basic styling to the gallery using css and make images look like a grid with thumbnails:
.gallery {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 20px;
max-width: 600px;
}
.gallery img {
width: 150px;
border-radius: 10px;
}
Now your gallery should look like this:
4. Style the lightbox
Now let’s create the outfit of the lightbox with shaded black overlay and white icons as the buttons. Complete your css with this:
#lightbox {
background: rgba(0,0,0,0.8);
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
justify-content: center;
align-items: center;
color: #fff;
}
.close, .prev, .next {
position: absolute;
cursor: pointer;
}
.close {
right: 10px;
top: 10px;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
5. Create the function
Now we have the gallery structure set up in html and the stylings in css, it’s time to add some javascript to get it work.
First include jQuery library with adding this inside the <head> of your document:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
Then, add the lightbox function to your js file:
$(function(){
// Lightbox function
var lightbox = function(){
var src = $('.active').attr('src');
$('#lightbox img').attr('src', src);
}
// Image is clicked
$('img').click(function(){
$('#lightbox').css('display','flex');
$(this).addClass('active');
lightbox();
});
// Close button clicked
$('.close').click(function(){
$('img').removeClass('active');
$('#lightbox').hide();
});
// Next button clicked
$('.next').click(function(){
if( $('.active').parent('.gallery').children('img:last').hasClass('active') ) {
$('.active').removeClass().parent('.gallery').children('img:first').addClass('active');
lightbox();
} else {
$('.active').removeClass().next('img').addClass('active');
lightbox();
}
});
// Prev button clicked
$('.prev').click(function(){
if( $('.active').parent('.gallery').children('img:first').hasClass('active') ) {
$('.active').removeClass().parent('.gallery').children('img:last').addClass('active');
lightbox();
} else {
$('.active').removeClass().prev('img').addClass('active');
lightbox();
}
});
});
It handles the following:
- Opens the lightbox when an image is clicked
- Closes the lightbox when the
Xbutton is clicked - Go to the next image when the
>button is clicked - Shows the previous image once the
<button is clicked
You can see a nice live example of this on CodePen.
