Material Inspired Nice Responsive Photo Gallery

Material Photo Gallery is a Vanilla JavaScript plugin that helps you generate a nice, responsive thumbnail grid as you seen on Google Image Search.

Once you click on a thumbnail, the zoomed image will be displayed in a fullscreen lightbox gallery with left / right arrows which enable you to navigate through all photos.

How to use it:

Load the required stylesheet material-photo-gallery.css in the head section of the html document.

<link rel="stylesheet" href="material-photo-gallery.css">

Wrap a group of thumbnail images into the grid as displayed below. You can use data-full attribute to define the full size images.

<div class="m-p-g">
  <div class="m-p-g__thumbs" data-google-image-layout data-max-height="350">
    <img src="thumb-1.jpg" data-full="full-1.jpg" class="m-p-g__thumbs-img" />
    <img src="thumb-2.jpg" data-full="full-2.jpg" class="m-p-g__thumbs-img" />
    <img src="thumb-3.jpg" data-full="full-3.jpg" class="m-p-g__thumbs-img" />
    ...
  </div>
  <div class="m-p-g__fullscreen"></div>
</div>

Load the JavaScript file material-photo-gallery.js at the bottom of the document.
Initialize the thumbnail grid and enable the gallery lightbox.

var elem = document.querySelector('.m-p-g');
document.addEventListener('DOMContentLoaded', function() {
  var gallery = new MaterialPhotoGallery(elem);
});

Changelog:

10/24/2018

• added swipe gestures support