Material Inspired Nice Responsive Photo Gallery

Category: Gallery , Javascript , Recommended | December 12, 2015
Author: ettrics
Views Total: 2,126
Official Page: Go to website
Last Update: December 12, 2015
License: MIT

Preview:

Material Inspired Nice Responsive Photo Gallery

Description:

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 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);
});
  • Matthew Thompson

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