之前分享过FancyBox弹出窗口插件的应用，今天再分享一个类似的 jQuery 灯箱插件，使用VenoBox弹出窗口实现图片相册功能。比如详情页的图集功能、相册功能、列表页的图片预览等等都可以使用。这个插件区别在于 会计算显示图像的高度，并保留其高度。

引用插件文件

插件DEMO文件在本文末可下载，实际引用时改成自己的目录即可，引用代码示例：

<link rel="stylesheet" href="目录/venobox.min.css" type="text/css" media="screen" />


<script type="text/javascript" src="目录/venobox.min.js">script>


<script type="text/javascript">
new VenoBox({
    selector: '.my-image-links',
    numeration: true,
    infinigall: true,
    share: true,
    spinner: 'rotating-plane'
});
script>

编写HMTL代码

参考下方示例修改循环调用标签即可，示例代码如下：

<a class="my-image-links" data-gall="gallery01" href="big1.jpg"><img src="small1.jpg">a>
<a class="my-image-links" data-gall="gallery01" href="big2.jpg"><img src="small2.jpg">a>

温馨提示

如果内容不是图像，比如网页、视频、Ajax等，则必须通过数据属性指定其类型data-vbtype，示例代码如下：

class="venobox" data-vbtype="iframe" href="网址">网址
class="venobox" data-vbtype="inline" title="My Description" href="#inline">Open inline content
class="venobox" data-vbtype="ajax" href="AJAX地址">Ajax
class="venobox" data-vbtype="video" href="视频地址">视频

另外，VenoBox也是基于jquery开发的插件，所以记得引用jquery文件，具体可下载下方DEMO演示文件。