Author: | micahstubbs |
---|---|
Views Total: | 3,985 views |
Official Page: | Go to website |
Last Update: | October 24, 2018 |
License: | MIT |
Preview:

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 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
What is the best size to use for thumbs and full image..?
Can we include this in angular application , If any suggestions for this