jQuery fancybox插件使用教程 最新3.57版

　　通过使用jquery 的fancybox插件可以很方便的实现一些特效，比如图片放大，图集功能，视频播放等功能，下面是我个人使用jquery 的fancybox的一些学习记录。

　　最新的jquery 的fancybox插件版本是3.57版本，

国际调用的链接地址：

https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css

https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js

国内推荐地址：

https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css

https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js

使用方法

(1)需要加载jquery，建议3以上版本

(2)需要加载上面的默认js和css。

(3)用数据属性初始化

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

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

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

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

官方教程：

http://fancyapps.com/fancybox/3/docs/#introduction (英文，可使用chrome等浏览器翻译功能翻译)

https://salongweb.com/fancybox3.html            （中文的详细参考教程）

注意事项：

与bootstrap自带的popper.min.js同时调用，fancybox特效会失效，目前，我在使用fancybox特效的页面都不调用popper.min.js