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