照片库插件 Material Photo Gallery
jopen
8年前
Material Photo Gallery 是一个 javascript 照片库插件，灵感来自于 Google 照片。 此插件里三个主要的进程，第一个是当图片加载时用于检测的进程，第二个是用于图片的布局，第三个用于图像的动态展示。
Demo
Install
NPM
npm install material-photo-gallery --save-dev
Usage
var MaterialPhotoGallery = require('material-photo-gallery'); var elem = document.querySelector('.m-p-g'); var gallery = new MaterialPhotoGallery(elem);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.