照片库插件 Material Photo Gallery

jopen 6年前

Material Photo Gallery 是一个 javascript 照片库插件,灵感来自于 Google 照片。 此插件里三个主要的进程,第一个是当图片加载时用于检测的进程,第二个是用于图片的布局,第三个用于图像的动态展示。


Demo

View 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.

项目地址: https://github.com/ettrics/material-photo-gallery