Modal Image Gallery with jQuery lighter-box Plugin

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


Plugin Overview

Plugin: lighterbox
Author: Adam Henson
Licence: MIT Licence
Published: March 21, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.11.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 36 KB

How to Use It:

1. Load the jQuery and lighterbox.js into your website.

<!--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 HTML structure for 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 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 jQuery document ready function.

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

5. To change the over-layer color when modal lightbox open. Default: ‘white’, type: string

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

6. To change the over-layer CSS opacity.

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

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

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

Be the first to comment

Leave a Reply

Your email address will not be published.


*