Responsive Lightbox Image Gallery jQuery

A responsive, mobile-friendly jQuery lightbox plugin to create an image gallery. It shows images in a popup box and blurs the main content when opened. Also supports a group of images to slide through each other with the next and previous buttons.

How to Create Lightbox Image Gallery

1. Load the jQuery into the HTML document and also include lightbox javascript and CSS files in it.

<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!--Lightbox Js-->
<script src="assets/js/jquery.lightbox.js"></script>

<!--Lightbox CSS-->
<link rel="stylesheet" href="assets/css/jquery.lightbox.css">

2. Create an unordered list of images for your gallery with the following structure.

<ul class="gallery">
 	<li><a href="images/sample_a.jpg"><img src="images/sample_a_thumb.jpg" alt="Image"></a></li>
 	<li><a href="images/sample_b.jpg"><img src="images/sample_b_thumb.jpg" alt="Image"></a></li>
 	<li><a href="images/sample_c.jpg"><img src="images/sample_c_thumb.jpg" alt="Image"></a></li>
 	<li><a href="images/sample_d.jpg"><img src="images/sample_d_thumb.jpg" alt="Image"></a></li>
</ul>

3. Initiate Lightbox in the jQuery document ready function.

// Initiate Lightbox
$(document).ready(function() {
$('.gallery a').lightbox();
});

4. To add the caption bar in the lightbox create data-caption attribute in the anchor of the image.

<a href="myimage.jpg" data-caption="This is a picture of a cat">....</a><a href="myimage.jpg" data-caption="This is a picture of a cat">....</a>

5. To disable lightbox navigation (next & previews buttons etc). Default: true

$('.gallery a').lightbox({
nav: false
});

6. To disable the background blur effect turn the following option false. Default: true

$('.gallery a').lightbox({
blur: false
});

7. If you want to change the margin around the image use the following option to customize. Default: 50

$('.gallery a').lightbox({
margin: 30, //type number
});

8. The minimum window width or height to open the lightbox.

$('.gallery a').lightbox({
minSize: 480
});

That’s all! hopefully, you have successfully created a responsive lightbox image gallery. If you have any questions or facing issues, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.