Justified Grid Gallery With Lightbox Support - grid-gallery

Justified Grid Gallery With Lightbox Support - grid-gallery

A small grid gallery jQuery plugin to generate a responsive, justified grid layout for showcasing your photos in an elegant way.

Clicking on any of these images will display a gallery lightbox where the visitors are able to navigate between images by clicking navigation arrows.

Heavily based on CSS Grid Layout System.

1. Import jQuery (slim build) and the jQuery grid-gallery plugin's files into the document.

<link rel="stylesheet" href="css/grid-gallery.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="js/grid-gallery.min.js"></script>

2. Create an empty element for the gallery lightbox.

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

3. Insert your own images to the grid gallery as follows.

<div class="gg-box">
  <div class="gg-element">
    <img src="https://picsum.photos/1600/1300/?random">
  </div>
  <div class="gg-element">
    <img src="https://picsum.photos/1600/1200/?random">
  </div>
  <div class="gg-element">
    <img src="https://picsum.photos/1200/1600/?random">
  </div>
  <div class="gg-element">
    <img src="https://picsum.photos/1600/1201/?random">
  </div>
  <div class="gg-element">
    <img src="https://picsum.photos/1200/1601/?random">
  </div>
  <div class="gg-element">
    <img src="https://picsum.photos/1201/1600/?random">
  </div>
  ...
</div>

This awesome jQuery plugin is developed by jestov. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 17.06.2018
  • Source