Simple jQuery Grid Layout Image Gallery with Basic Lightbox

March 2, 2019 admin Gallery, LightBox 0

GalleryPopup is a simple jQuery grid layout image gallery with basic popup lightbox. The plugin puts the images into grid layout and show a single image in overly on top of the page.

Plugin Preview

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins

Plugin Overview

Plugin: GalleryPopup
Author: Louise Ryste
Licence: MIT Licence
Published:
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 1.04 MB
Demo Download

How to Use jQuery Grid Layout Image Gallery:

1. Load the jQuery and GalleryPopup JavaScript and CSS files into HTML document. 

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

<!--GalleryPopup JS-->
<script src="js/jquery.gallery-popup.js"></script>

<!--GalleryPopup CSS-->
<link rel="stylesheet" href="css/style.css">

2. Create HTML structure for gallery layout and put the images links into it.

    <ul id="imgGallery">
        <div>
            <li>
                <a href="images/bokeh-close-up-nature.jpg">
                    <img src="images/bokeh-close-up-nature.jpg" alt="Flower 1" class="myImg">
                </a>
            </li>
            <li>
                <a href="images/calendula-medicinal-plant-nature-plant-65950.jpeg">
                    <img src="images/calendula-medicinal-plant-nature-plant-65950.jpeg" alt="Flower 2" class="myImg">
                </a>
            </li>
            <li>
                <a href="images/cosmos-flower-cosmos-flower-bloom-51942.jpeg">
                    <img src="images/cosmos-flower-cosmos-flower-bloom-51942.jpeg" alt="Flower 3" class="myImg">
                </a>
            </li>
            <li>
                <a href="images/garden-rose-red-pink-56866.jpeg">
                    <img src="images/garden-rose-red-pink-56866.jpeg" alt="Flower 4" class="myImg">
                </a>
            </li>
        </div>
        <div>
            <li>
                <a href="images/gerbera-flower-blossom-bloom-53173.jpeg">
                    <img src="images/gerbera-flower-blossom-bloom-53173.jpeg" alt="Flower 5" class="myImg">
                </a>
            </li>
            <li>
                <a href="images/rose-blossom-bloom-red-rose-87469.jpeg">
                    <img src="images/rose-blossom-bloom-red-rose-87469.jpeg" alt="Flower 6" class="myImg">
                </a>
            </li>
            <li>
                <a href="images/lily-flower-red-blossom-53976.jpeg">
                    <img src="images/lily-flower-red-blossom-53976.jpeg" alt="Flower 8" class="myImg">
                </a>
            </li>
            <li>
                <a href="images/dahlia-red-blossom-bloom-60597.jpeg">
                    <img src="images/dahlia-red-blossom-bloom-60597.jpeg" alt="Flower 7" class="myImg">
                </a>
            </li>
        </div>
    </ul>

3. Call the plugin in jQuery document ready function to active the images gallery. 

$(function(){

 $('#imgGallery').galleryPopUp();
    
});

Related jQuery Plugins: