给网站引入强大丰富的响应式弹出框插件 fancyBox3

fancyBox3 是一款优秀的弹出框Jquery插件,之前使用过很多 LightBOX 弹窗插件,功能都很强大,fancyBox3 相对来说,不论是设计和功能上都更胜一筹,所以萨龙网络所有主题需要弹出框的都有添加 fancyBox3 插件。

微信截图_20210315204332.png
微信截图_20210315204314.png

依赖

jQuery 3+ 是首选,但 fancyBox3 同样适用于jQuery 1.9.1+ 和 jQuery 2+。

兼容性

fancyBox3 包含对触摸手势的支持,甚至支持缩放手势,非常适合移动和桌面浏览器。

fancyBox3 已经在以下浏览器/设备上测试过:

Chrome
Firefox
IE10/11
Edge
iOS Safari
Nexus 7 Chrome

下载 fancyBox3

GitHub 上下载最新的 fancyBox3。

或者直接链接到cdnjs上的fancybox文件 - https://cdnjs.com/libraries/fancybox


确保在 fancyBox3 JS文件之前添加了jQuery库
如果您的页面上已经有jQuery,则不应再次加载
不要同时包含 fancybox.js 和 fancybox.min.js 文件
当在浏览器上直接打开本地文件时,某些功能(ajax,iframe等)不起作用,代码必须在Web服务器上运行

如何使用

使用fancyBox3 最基本的方法是通过添加 data-fancybox属性到元素中。这会自动绑定并启动fancyBox3 的点击事件。使用href或 data-src属性来指定内容的来源。例:

<a href="image.jpg" data-fancybox data-caption="Caption for single image">
    <img src="thumbnail.jpg" alt="" />
</a>

如果有一组项目,则可使用data-fancybox为每个项目使用相同的属性值来创建一个画廊,每个组都应该有一个独特的价值。例:

<a href="image_1.jpg" data-fancybox="gallery" data-caption="Caption #1">
    <img src="thumbnail_1.jpg" alt="" />
</a>
<a href="image_2.jpg" data-fancybox="gallery" data-caption="Caption #2">
    <img src="thumbnail_2.jpg" alt="" />
</a>

如果选择此方法,将应用默认设置。有关如何通过更改默认值或使用属性来定制示例的信息,请参阅 选项 一节 data-options

有时有多个链接指向相同的来源,并在画廊中创建重复。为了避免这种情况,只需使用 data-trigger属性中用于data-fancybox其他链接的相同值的属性即可。可选地,使用 data-indexattribute来指定起始元素的索引:

<a data-trigger="gallery" href="javascript:;">
    <img src="thumbnail_1.jpg" alt="" />
</a>
最后修改:2021 年 03 月 30 日
如果觉得我的文章对你有用,请随意赞赏