图片/图形
仿Google Photos纯javascript图片画廊插件
PetitQ
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);
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
