Lightweight Photo Grid Gallery With Lightbox – grid-gallery

Preview:

Description:

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-box">
  <img src="img/1.jpg">
  <img src="img/2.jpg">
  <img src="img/3.jpg">
  <img src="img/4.jpg">
  <img src="img/5.jpg">
  ...
</div>

Create a fullscreen overlay for the image lightbox. That’s it.

<div id="gg-screen" hidden></div>

Changelog:

11/24/2019

• update class name

10/27/2019

• improve UI

04/21/2019

• improve css