Simple Responsive Lightbox Gallery with CSS & jQuery

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 Preview

Share this:

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

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

Demo Download

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();

});