Responsive Lightbox Image Gallery jQuery – lightbox.js

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


Plugin Overview

Plugin: jquery.lightbox.js
Author: Duncan McDougall
Licence: MIT Licence
Published: February 17, 2019
Official Website: Go to website
Dependencies: jQuery 1.9.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript, images files)
Package Size: 544 KB

How to Use Lightbox Image Gallery:

1. Load the jQuery into HTML document and also include lightbox javascript and CSS file 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 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 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 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 lightbox.

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

Be the first to comment

Leave a Reply

Your email address will not be published.


*