照片庫插件 Material Photo Gallery

jopen 8年前發布 | 40K 次閱讀 圖片展示jQuery插件 jQuery插件 material-photo-gallery

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

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！