Modal Image Gallery with jQuery lighter-box Plugin

A lightweight, responsive, and fully customizable modal, popup lightbox image gallery. The lightbox is an HTML, CSS, and javascript-based jQuery plugin that helps you to create ajax ready image gallery with modal/lightbox.

How to Create an Image Gallery with jQuery Lighter-box

1. Load the jQuery and lighterbox.js into the head tag of your HTML document.

<!--jQuery-->
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<!--lighterbox js-->
<script src="js/jquery.lighterbox.0.0.3.min.js"></script>

2. Create the HTML structure for the image gallery layout.

<article>
    <section>
        <a href="image-url-here" class="lighterbox">
            <img src="thumbnail-url-here" />
            <h2 class="lighterbox-title">Title for modal gallery</h2>
            <span class="lighterbox-desc">caption for modal gallery</span>
        </a>
    </section>
	-------------------------------------------------------
	-------------------------------------------------------
	-------------------------------------------------------
    <section>
        <a href="image-url-here" class="lighterbox">
            <img src="thumbnail-url-here" />
            <h2 class="lighterbox-title">Title for modal gallery</h2>
            <span class="lighterbox-desc">caption for modal gallery</span>
        </a>
    </section>
</article>

3. The basic CSS style for the modal gallery.

        article {
            max-width:610px;
            margin: 0.5em auto;
        }
        h1 {
            font-size: 2.7em;
            text-align: center;
        }
        section {
            max-width: 49%;
            float: left;
            margin-right: 0.5%;
            text-align: center;
        }
        img {
            max-width: 100%;
            height: auto;
        }
        a {
            color: black;
            text-decoration: none;
        }
        a:hover img {
            opacity:0.7;
        }
        a h2, a span {
            /* hide the title and caption until lighterbox shows it */
            display: none;
        }
        @media (max-width: 500px) {
            h1 {
                font-size: 1.5em;
            }
            section {
                max-width: 100%;
                float: none;
            }
        }

4. Initialize the lighterbox plugin in the jQuery document ready function.

$(document).ready(function(){
  $(".lighterbox").lighterbox();
});

5. To change the overlayer color when the modal lightbox opens. Default: ‘white’, type: string

$(".lighterbox").lighterbox({
overlayColor: 'black'
});

6. To change the overlayer CSS opacity.

$(".lighterbox").lighterbox({
overlayOpacity: '0.4',
});

7. Control the animation transition speed with the following option.

$(".lighterbox").lighterbox({
animateSpeed: 400,
}); 

That’s all! hopefully, you have successfully created a modal image gallery using jQuery. If you have any questions or facing any issues, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.