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属性来指定内容的来源。
<a href="image.jpg" data-fancybox data-caption="Caption for single image">
    <img src="thumbnail.jpg" alt="" />
</a>
(4)如果有一组项目，则可使用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>
官方教程：
http://fancyapps.com/fancybox/3/docs/#introduction (英文，可使用chrome等浏览器翻译功能翻译)
https://salongweb.com/fancybox3.html            （中文的详细参考教程）
注意事项：
与bootstrap自带的popper.min.js同时调用，fancybox特效会失效，目前，我在使用fancybox特效的页面都不调用popper.min.js