使用VenoBox弹出窗口灯箱插件实现图片相册功能
之前分享过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模板网无关。
相关文档
- 引擎力Google seo优化师实战经验：什么是301重定向，如...
- 外贸网站建设之如何使用Canonical标签
- Ahrefs使用教程
- SEMrush使用教程
- 详解四大Google网站管理员工具的功能及用途
- zblog插件全自动采集伪原创发布插件免费
- zblog插件-站长必备zblog插件
- 万能免费采集软件，完全免费且功能强大（附下载）
- 如何通过“ChatGPT行程签证”轻松实现全球旅行梦想
- Zblog采集-Zblog自动采集-Zblog免登录发布插件
- nofollow是否会浪费PR和权重？
- pbootcms模板修改tags实现keywords内容关联匹配
- pbootcms提示提交失败，请使用POST方式提交
- pbootcms模板导航设置外链时新窗口打开
- 如何在PbootCMS中实现无刷新点赞功能？
- PbootCMS实现数字条分页样式效果
- 如何使用PbootCMS内容详情页标签调用相关信息
- 迅睿cms首页及各页面实现ajax瀑布流滚动加载
- 使用FancyBox弹出窗口插件实现图片/视频点击弹出层浏览
- 使用VenoBox弹出窗口灯箱插件实现图片相册功能
0 条评论
