使用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模板网无关。
相关文档
- 迅睿cms首页及各页面实现ajax瀑布流滚动加载
- 使用FancyBox弹出窗口插件实现图片/视频点击弹出层浏览
- 使用VenoBox弹出窗口灯箱插件实现图片相册功能
- 使用JavaScript代码实现页面下滑时顶部导航栏固定跟随页面...
- 迅睿cms使用全局表单制作证书查询功能
- 百度编辑器 UEditor 用 highlight.js 库实现...
- 用jQuery替换文章编辑器里的图片样式及alt标签 实现自定义...
- 迅睿cms站群系统实现全国城市分站功能插件及调用标签
- 迅睿cms文章标题生成图片插件：亿级文章配图器不占用空间
- 迅睿cms使用API接口实现主站统一管理多站点群友情链接
- 网站开启强制HTTPS后，弹窗提示请使用http模式访问
- 迅睿cms服务器CPU使用率及负载状态100%如何排查解决
- WordPress安装插件的3种方法
- WordPress怎样删除特定主题或插件翻译
- WordPress如何使用RSS订阅
- WordPress实现整站静态化 WP2Static使用教程
- WordPress使用区块管理器隐藏不需要的古腾堡区块
- 使用古腾堡可重用区块高效管理WordPress重复内容
- WordPress重新生成缩略图 Regenerate Thum...
- 让WordPress实现页面预加载 Instant.page使用...
0 条评论
