参考资料

1. fancybox：老版本仓库，截止V3.5.7
2. ui：新版本仓库
3. fancyapps：fancyapps官网，提供提供包括 Fancybox 在内的一系列 UI 组件
4. Showcase：官方示例写法，可以参考

版本差异

fancyBox 是一个 JavaScript 库，它以优雅的方式展示图片，视频和一些 html 内容。

仓库截至到V3.5.7的版本，后续的版本融合到fancyapps UI组件库中去了

要查看V5相关资料的话，最好就看官方，网上大多是V3

灯箱效果

要使用fancyBox 图片灯箱效果也非常简单

首先从CDN引入资源

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.min.css" />

为元素添加（声明）data-fancybox属性。

<a href="image-a.jpeg" data-fancybox data-caption="Single image">
  <img src="thumbnail-a.jpeg" />
</a>

使用Fancybox.bind()方法给相应的元素绑定相应的处理程序

• 第一个参数：选择器，可以使用CSS选择器或者常规选择器（只要querySelectorAll方法支持的都行）

• 第二个参数：fancyBox的选项，通常用于自定义，如果空着，那么所有配置使用fancyBox的默认选项

Fancybox.bind("[data-fancybox]", {
  // Your custom options
});

其他的自定义选项可以参考官网，基本的使用已满足日常的需要