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 a simple, mobile-friendly, and responsive lightbox gallery.

It arranges your photos (image thumbnails) in CSS justified grid layout. When the user clicks on the image, it loads the actual image and shows it in a lightbox.

How to Create a 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 a 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 the jQuery document ready function.

$(document).ready(function(){

   const lb = lightbox();

});

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