今天要分享的是一个灯箱脚本库：Fancybox。最近了不起刚好用到它。这里就和大家分享下。
简介
Fancybox 是终极的 JavaScript 灯箱替代品，为多媒体显示中的优质用户体验设定了标准。支持图像、视频、地图、内联内容、iframe 和任何其他 HTML 内容。
此外，Fancybox 很容易集成到任何 JavaScript 框架中。详情可以参见官方文档中关于 React、Vue 和 Angular 的示例。
主要特点
FancyBox 是一个最流行的灯箱脚本JavaScript 库，它以优雅的方式展示图片，视频和一些 html 内容。它包含你所期望的一切特性–支持触屏，响应式和高度自定义等。
- 用 TypeScript 编写，没有外部依赖
- 高度可定制，具有大量配置选项和 CSS 变量
- 通过滑动、拖动和捏合缩放手势对触摸和移动设备进行了优化
- 多个同时打开（活动）的实例
- 两种类型的缩略图：经典和现代
- 紧凑模式，具有类似移动设备的用户体验
- 各种转换控件新增
新版的 Fancybox，还支持 <picture> 元素，可以处理包含无限项目的新图库，维持空闲状态，新增鼠标平移功能等。
安装和使用
由于 Fancybox 是用 vanilla JS 编写的，因此很容易集成到任何地方。您不需要jQuery或任何其他依赖项！
安装
对于大多数用户，建议从 NPM 包注册表安装并使用生成工具。
# Usage with NPM
$ npm install --save @fancyapps/ui# and with Yarn
$ yarn add @fancyapps/ui
安装后，您可以将 Fancybox 作为 ES 模块包含在内：
import { Fancybox } from "@fancyapps/ui";
import "@fancyapps/ui/dist/fancybox/fancybox.css";
当然，你也可以从CDN进行安装：
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
/>
也可以下载文件到本地，并手动引用。(最新的代码也始终在 GitHub 上可用，而分发文件可以在 dist 文件夹中找到)
<script src="fancybox.umd.js"></script>
<link rel="stylesheet" href="fancybox.css" />
使用
创建元素并添加 data-fancybox 属性。使用 href or data-src 属性指定要在 Fancybox 中显示的内容源。
<a href="image-a.jpeg" data-fancybox data-caption="Single image"><img src="thumbnail-a.jpeg" />
</a>
通过向多个元素添加相同的属性data-fancybox 值来创建一组元素。您可以在每个元素中混合图像、视频和任何 HTML 内容。
<a href="image-a.jpeg" data-fancybox="gallery" data-caption="Caption #1"><img src="thumbnail-a.jpeg" />
</a><a href="image-b.jpeg" data-fancybox="gallery" data-caption="Caption #2"><img src="thumbnail-b.jpeg" />
</a>
添加点击事件
最后一步是使用该 Fancybox.bind() 方法将处理程序添加到启动 Fancybox 的元素的 click 事件。
添加 Fancybox JS 文件后，将此代码粘贴到页面上的任何位置：
Fancybox.bind("[data-fancybox]", {// Your custom options
});
重点是自定义，根据你自己的需求去处理相应的事件！
以上只是 Fancybox 最基本的用法。更多用法和示例，请查阅官网网站。
官网
https://fancyapps.com/
最后
后续会继续详细分享更多实用的工具和功能。关注全网同名账号【程序视点】，这样就不会错过之后的精彩内容啦！
如果这篇文章对你有帮助的话，别忘了【喜欢】【收藏】支持下哦~
