Simple jQuery Grid Layout Image Gallery with Basic Lightbox

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

Share this:

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();
    
});