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

模板制作 2023-06-19 17:02:54 1

无需魔法，免费体验ChatGPT-4 / MJ绘图等AI大模型！AI问答、写文案、做表格、绘图、写脚本、写代码...

之前分享过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演示文件。