material-photo-gallery是一款仿Google Photos纯javascript图片画廊插件。该图片画廊使用Material Design风格,缩略图片以网格进行布局,点击相应的缩略图会弹出全屏大图,并可以在大图预览界面对所有的图片进行预览。
使用方法
该图片画廊插件依赖于David DeSandro的imagesLoaded插件 —— 一款高性能图片预加载插件,和Anh Trinh的Google Image Layout插件 —— 一款用于制作类似于Google Image Search、Flickr Explore和Google Plus Photo Gallery效果的图片网格布局插件。
使用material-photo-gallery图片画廊插件时只需要引入material-photo-gallery.min.js和material-photo-gallery.min.css文件即可。
<link rel="stylesheet" href="material-photo-gallery.css" /> <script src="material-photo-gallery.min.js"></script>
HTML结构
在该图片画廊的HTML结构中,最外层的容器div.m-p-g
用于插件的初始化。div.m-p-g__thumbs
是网格布局的缩略图层,其中只需要根据你的实际需要设置所有图片的最大高度属性:data-max-height
。每一张图片中的data-full
属性是链接这张图片的高清大图的URL地址。
<div class="m-p-g"> <div class="m-p-g__thumbs" data-google-image-layout data-max-height="350"> <img src="img/1.jpg" data-full="img/1-big.jpg" class="m-p-g__thumbs-img" /> <img src="img/2.jpg" data-full="img/2-big.jpg" class="m-p-g__thumbs-img" /> <img src="img/3.jpg" data-full="img/3-big.jpg" class="m-p-g__thumbs-img" /> <img src="img/4.jpg" data-full="img/4-big.jpg" class="m-p-g__thumbs-img" /> <img src="img/5.jpg" data-full="img/5-big.jpg" class="m-p-g__thumbs-img" /> <img src="img/6.jpg" data-full="img/6-big.jpg" class="m-p-g__thumbs-img" /> <img src="img/7.jpg" data-full="img/7-big.jpg" class="m-p-g__thumbs-img" /> <img src="img/8.jpg" data-full="img/8-big.jpg" class="m-p-g__thumbs-img" /> </div> <div class="m-p-g__fullscreen"></div> </div>
初始化插件
在完成了相关资源文件的引入和HTML结构的编写之后,可以通过下面的方法来初始化该图片画廊插件。
// 选择图片画廊元素 var elem = document.querySelector('.m-p-g'); // 初始化图片画廊 var gallery = new Gallery(elem);
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!