A lightweight and easy to use jQuery plugin to show images in responsive popup modal / lightbox. The mini lightbox helps you to create simple, mobile-friendly and responsive lightbox gallery.
It arrange your photos (image thumbnails) in CSS justified grid layout. When user click on image, it load the actual image and show in lightbox.
Plugin Overview
Plugin: | Mini Lightbox |
Author: | Kamil Kondratowicz |
Licence: | MIT Licence |
Published: | June 1, 2019 |
Repository: | Fork on GitHub |
Dependencies: | jQuery 1.3.1 or Latest version |
File Type: | zip archive (Images, HTML, CSS & JavaScript ) |
Package Size: | 2.14 MB |
How to Make Responsive Lightbox Image Gallery
1. After downloading the plugin, load the lightbox CSS files into your webpage.
<!-- Responsive Lightbox Gallery CSS --> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/lightbox.min.css">
2. Create markup for gallery images and put your image links in it.
<ul> <li> <a class="link-photo" data-lightbox="img" href="img/bathtub.jpg" title="Powieksz zdjecie"> <img src="img/bathtubTH.jpg" alt="demo"> </a> </li> <li> <a class="link-photo" data-lightbox="img" href="img/the-bath.jpg" title="Powieksz zdjecie"> <img src="img/the-bathTH.jpg" alt="demo"> </a> </li> <li> <a class="link-photo" data-lightbox="img" href="img/children.jpg" title="Powieksz zdjecie"> <img src="img/childrenTH.jpg" alt="demo"> </a> </li> <li> <a class="link-photo" data-lightbox="img" href="img/asia.jpg" title="Powieksz zdjecie"> <img src="img/asiaTH.jpg" alt="demo"> </a> </li> </ul>
3. Now, load the plugin’s JavaScript file just after the jQuery.
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- Mini Lightbox Js --> <script src="js/lightbox.min.js"></script>
3. Finally initialize the plugin in jQuery document ready function.
$(document).ready(function(){ const lb = lightbox(); });
Very Nice lightbox. The only thing that would make it better is if it worked. I downloaded your code and only swapped out for some of my own and it stopped working.
Hello Bill!
There may be an error in your code that’s causing stopped working. Check console messages/errors!