Modal Image Gallery with jQuery lighter-box Plugin

Modal Image Gallery with jQuery lighterbox Plugin
Code Snippet:lighterbox
Author: Adam Henson
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 1,947
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...