Lightweight Photo Grid Gallery With Lightbox – grid-gallery

A lightweight, responsive photo grid gallery with lightbox integrated that allows the user to switch between images in a popup by clicking on any thumbnail.

How to use it:

Link to the stylesheet grid-gallery.min.css and JavaScript grid-gallery.min.js.

<link rel="stylesheet" href="css/grid-gallery.min.css">
<script src="js/grid-gallery.min.js"></script>

Add images to the grid gallery.

<div class="gg-container">
  <div class="gg-box">
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
  </div>
  <div class="gg-box"> 
    <img src="4.jpg">
    <img src="5.jpg">
    <img src="6.jpg">
  </div>
  ... more galleries here ... 
</div>

That’s it. Override the default settings to config the plugin.

gridGallery({
 // gallery selector
 selector: "#mSelector",
 // enable dark mode
 darkMode: true,
 // or "horizontal"
 layout: "square",
 // space between images
 gapLength: 4,
 // row height
 rowHeight: 180,
 // column width
 columnWidth: 200
 
});

Changelog:

12/09/2019

• improve responsive

12/08/2019

• allows multiple galleries

12/07/2019

• close with ESC key

11/24/2019

• update class name

10/27/2019

• improve UI

04/21/2019

• improve css