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

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

引用插件文件

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








new VenoBox({
    selector: '.my-image-links',
    numeration: true,
    infinigall: true,
    share: true,
    spinner: 'rotating-plane'
});

编写HMTL代码

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


温馨提示

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

网址
Open inline content
Ajax
视频

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

教程附件

教程附件仅限 高级/渠道 会员下载,请先登录平台账号

立即登录

标签:

上一篇使用FancyBox弹出窗口插件实现图片/视频点击弹出层浏览
下一篇将Html5手机端网站封装为微信小程序的方法(图文教程)

相关文章