使用VenoBox弹出窗口灯箱插件实现图片相册功能

迅睿教程 0次 来源：老K模板网 收藏

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

引用插件文件

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

<link rel="stylesheet" href="目录/venobox.min.css" type="text/css" media="screen" />
<!-- 放到<head>标签内 -->

<script type="text/javascript" src="目录/venobox.min.js"></script>
<!-- 放到jQuery库之后 -->

<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，示例代码如下：

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

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

免责声明：1.凡本站注明“来源：XXX（非老K模板网）”的作品，均转载自其它媒体，所载的文章、图片、音频视频文件等资料的版权归版权所有人所有，如有侵权，请联系laokcms#126.com处理；2.凡本站转载内容仅代表作者本人观点，与老K模板网无关。

相关文档

0 条评论

网友留言

搜索帮助

更多

人气文章

Copyright © 2025 © 老K模板网 ✪ 版权所有
赣ICP备20009342号