Material Inspired Nice Responsive Photo Gallery

Category: Gallery , Javascript , Recommended | October 24, 2018
Views Total:3,998 views
Official Page:Go to website
Last Update:October 24, 2018


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:

2 thoughts on “Material Inspired Nice Responsive Photo Gallery

  1. Matthew Thompson

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

    1. venkat

      Can we include this in angular application , If any suggestions for this


Leave a Reply