Material Photo Gallery

A vanilla javascript photo gallery plugin inspired by Google Photos.

Usage

var elem = document.querySelectorAll('.m-p-g');
document.addEventListener('DOMContentLoaded', function() {
    elem.forEach(el => new MaterialPhotoGallery(el))
});

Include Script

<script src="material-photo-gallery.min.js"></script>

Include Stylesheet

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

HTML

<div class="m-p-g">

	<div class="m-p-g__thumbs" data-google-image-layout data-max-height="350">
			<img src="http://unsplash.it/600/400?image=198" data-full="http://unsplash.it/1200/800?image=198" class="m-p-g__thumbs-img" />
			<!-- Rest of your thumbnails... -->
	</div>

	<div class="m-p-g__fullscreen"></div>
</div>

Specify the path to the full size images with the data-full attribute on the thumbnail images.

Initialize Plugin

// Select gallery element.
var elem = document.querySelector('.m-p-g');

// Init gallery
var gallery = new Gallery(elem);

Browser Support

• Latest Edge
• Latest Chrome
• Latest Firefox
• Latest Safari

Credits

This project uses imagesLoaded by David DeSandro, and Google Image Layout by ptgamr.

License

MIT license.