FancyBox 是一款功能强大的 JavaScript 库，用于在网页上创建优雅的灯箱效果，它支持多种媒体类型，包括图片、视频、内联内容和iframe等，FancyBox 提供了高度的自定义功能，用户可以通过简单的配置来满足不同的需求，本文将详细介绍 FancyBox 的功能、安装步骤以及使用方法，并提供一些常见问题的解答。
一、FancyBox 简介
FancyBox 是一个流行的 JavaScript 灯箱插件，主要用于展示图片、视频和其他 HTML 内容，它具备响应式设计，支持触屏操作，并且可以在多种设备上流畅运行，FancyBox 的特点包括：
1、高度可定制：提供了大量的配置选项和 CSS 变量。
2、多实例支持：可以同时打开多个实例。
3、多种缩略图模式：经典和现代两种缩略图样式。
4、紧凑模式：提供类似移动设备的用户体验。
5、转换控件：支持滑动、拖动和捏合缩放手势。
6、支持新元素：如<picture> 元素，支持无限项目的新图库，维持空闲状态，新增鼠标平移功能等。
二、安装和使用
1. 安装方法
FancyBox 可以通过多种方式安装，包括直接下载文件、使用 CDN 或通过包管理工具（如 NPM 和 Yarn）。
1.1 通过 CDN 安装
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"> <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
1.2 通过 NPM 安装
npm install --save @fancyapps/ui
1.3 通过 Yarn 安装
yarn add @fancyapps/ui
1.4 手动下载
可以从 GitHub 上下载最新的版本，并手动引用到项目中。
2. 基本使用
使用 FancyBox 最简单的方法是通过添加data-fancybox 属性到一个超链接标签。
<a href="image.jpg" data-fancybox data-caption="My caption">
<img src="thumbnail.jpg" alt="Thumbnail"/>
</a>通过这种方式，点击缩略图即可在 FancyBox 中查看大图。
3. 配置和初始化
可以通过 JavaScript 选择器选择一个元素，然后调用fancybox 方法进行初始化：
<script type="text/javascript">
$("[data-fancybox]").fancybox({
// Options will go here
});
</script>设置 FancyBox 的标题类型为浮动：
$("#single_1").fancybox({
helpers: {
title : {
type : 'float'
}
}
});三、API 参考
FancyBox 提供了丰富的 API 供开发者使用，包括打开、关闭、播放、暂停等功能，以下是部分常用的 API 方法：
| 名称 | 描述 |
| open | $.fancybox.open([group], [options])，示例：$.fancybox([{href : 'img1.jpg', title : 'Title'}, {href : 'img2.jpg', title : 'Title'}]); |
| cancel | $.fancybox.cancel()，取消加载图片或 AJAX |
| close | $.fancybox.close([force])，强制关闭 |
| play | $.fancybox.play()，开始或停止展开 |
| next | $.fancybox.next()，下一个 |
| prev | $.fancybox.prev()，上一个 |
| jumpto | $.fancybox.jumpto([index])，跳到第几个 |
| reposition | $.fancybox.reposition()，重新定位 |
| update | $.fancybox.update()，自动调整宽高 |
| toggle | $.fancybox.toggle()，如果自适应则展开到全屏 |
| showLoading | $.fancybox.showLoading()，显示加载动画 |
| hideLoading | $.fancybox.hideLoading()，隐藏加载动画 |
还有一些事件可供监听，如onCacel、beforeLoad、afterLoad、beforeShow 和afterShow 等。
四、媒体类型支持
FancyBox 支持多种媒体类型，包括图片、视频、内联内容和 iframe 等，以下是一些示例：
1. 图片
<a href="image.jpg" data-fancybox data-caption="My caption">
<img src="thumbnail.jpg" alt="Thumbnail"/>
</a>2. 内联内容
<div style="display: none;" id="hidden-content">
<h2>Hello</h2>
<p>You are awesome.</p>
</div>
<a data-fancybox data-src="#hidden-content" href="javascript:;">Show inline content</a>3. 视频
<a href="video.mp4" data-fancybox data-caption="My video">Play Video</a>
五、常见问题解答（FAQs）
1. FancyBox 如何在移动设备上运行？
FancyBox 支持触屏操作，并且对移动设备进行了优化，确保在移动设备上测试时，页面已经正确引入了 FancyBox 的 CSS 和 JS 文件，并且使用了最新版本的 jQuery（建议至少 v3.2.1）。
2. 如何禁用右键下载保护图片？
可以通过设置protect 选项来禁用右键下载保护：
$('[data-fancybox]').fancybox({
protect: false
});3. 如何在一个页面上使用多个 FancyBox 实例？
可以为不同的元素设置不同的data-fancybox 值，以区分不同的实例：
<a href="image1.jpg" data-fancybox="gallery1" data-caption="Caption #1">Image 1</a> <a href="image2.jpg" data-fancybox="gallery2" data-caption="Caption #2">Image 2</a>
六、小编有话说
FancyBox 作为一款功能强大且灵活的灯箱插件，广泛应用于各种网站项目中，其简洁的 API 设计和丰富的配置选项使得开发者可以轻松实现复杂的灯箱效果，无论是展示图片、视频还是内联内容，FancyBox 都能提供优雅的解决方案，希望本文能够帮助大家更好地理解和使用 FancyBox，提升网站的用户体验。