Responsive Lightbox Image Gallery jQuery

Responsive Lightbox Image Gallery jQuery
Code Snippet:jquery.lightbox.js
Author: Duncan McDougall
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 3,817
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...