Material Inspired Nice Responsive Photo Gallery

Category: Gallery , Javascript , Recommended | October 24, 2018
Author: micahstubbs
Views Total: 5,191
Official Page: Go to website
Last Update: October 24, 2018
License: MIT


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 class="m-p-g__fullscreen"></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);



  • added swipe gestures support

You Might Be Interested In:

One thought on “Material Inspired Nice Responsive Photo Gallery

  1. Matthew Thompson

    What is the best size to use for thumbs and full image..?


Leave a Reply