gallerly.js 是一款可以制作 Google Image Search 效果的图片画廊的纯 js 插件。该插件使用纯 javascript 编写,大小只有 7kb,是一款非常不错的轻量级图片画廊插件。
该图片画廊的基本 HTML 结构如下:
<div id="gallerly" class="container">
<h1>NASA Space Gallery</h1>
<div class="image-viewer">
<a class="thumbnail">
<img src="images/1.gif" data-title="..." data-description="..."/>
</a>
<a class="thumbnail">
<img src="images/2.jpg" data-title="..." data-description="..."/>
</a>
......
<div class="preview hide">
<div class="wrapper">
<span class="arrow"></span>
<a class="prev">← Prev</a>
<div class="preview-content">
<img src="" />
<div class="content">
<h3 class="title"></h3>
<span class="description"></span>
</div>
</div>
<a class="next">Next →</a>
<a class="close-preview">Close</a>
</div>
</div>
</div>
可以通过下面的方法来初始化该图片画廊插件。
var $gallerly = document.querySelector("#gallerly");
var gallerly = new Gallerly($gallerly);
演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!