fancyBox3 是一款优秀的弹出框Jquery插件，之前使用过很多 LightBOX 弹窗插件，功能都很强大，fancyBox3 相对来说，不论是设计和功能上都更胜一筹，所以萨龙网络所有主题需要弹出框的都有添加 fancyBox3 插件。

### 依赖

jQuery 3+ 是首选，但 fancyBox3 同样适用于jQuery 1.9.1+ 和 jQuery 2+。

### 兼容性

fancyBox3 包含对触摸手势的支持，甚至支持缩放手势，非常适合移动和桌面浏览器。

fancyBox3 已经在以下浏览器/设备上测试过：

- Chrome
- Firefox
- IE10/11
- Edge
- iOS Safari
- Nexus 7 Chrome

### 设置

可以通过链接`.css`和`.js`文件安装 fancyBox3 到html文件中，确保加载了 jQuery 库。以下是一个基本的HTML模板用作示例：

1. &lt;!DOCTYPE html&gt;
2. &lt;html&gt;
3. &lt;head&gt;
4. &lt;meta charset=“utf-8”&gt;
5. &lt;title&gt;My page&lt;/title&gt;
6. 
7. &lt;!– CSS –&gt;
8. &lt;link rel=“stylesheet” type=“text/css” href=“jquery.fancybox.min.css”&gt;
9. &lt;/head&gt;
10. &lt;body&gt;
11. 
12. &lt;!– Your HTML content goes here –&gt;
13. 
14. &lt;!– JS –&gt;
15. &lt;script src=“//code.jquery.com/jquery-3.2.1.min.js”&gt;&lt;/script&gt;
16. &lt;script src=“jquery.fancybox.min.js”&gt;&lt;/script&gt;
17. &lt;/body&gt;
18. &lt;/html&gt;

### 下载 fancyBox3

在 [GitHub](https://github.com/fancyapps/fancybox) 上下载最新的 fancyBox3。

或者直接链接到cdnjs上的fancybox文件 – <https://cdnjs.com/libraries/fancybox>

### 包安装

fancyBox3 也可在npm和Bower上使用。

1. \# NPM
2. npm install @fancyapps/fancybox –save
3. 
4. \# Bower
5. bower install fancybox –save

### 注意

- 确保在 fancyBox3 JS文件之前添加了jQuery库
- 如果您的页面上已经有jQuery，则不应再次加载
- 不要同时包含 fancybox.js 和 fancybox.min.js 文件
- 当在浏览器上直接打开本地文件时，某些功能（ajax，iframe等）不起作用，代码必须在Web服务器上运行

### 如何使用

**用数据属性初始化**

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

1. &lt;a href=“image.jpg” data-fancybox data-caption=“Caption for single image”&gt;
2. &lt;img src=“thumbnail.jpg” alt=“” /&gt;
3. &lt;/a&gt;

[在CodePen上查看演示](https://codepen.io/fancyapps/pen/ZxREZK?editors=1000)

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

1. &lt;a href=“image\_1.jpg” data-fancybox=“gallery” data-caption=“Caption #1”&gt;
2. &lt;img src=“thumbnail\_1.jpg” alt=“” /&gt;
3. &lt;/a&gt;
4. 
5. &lt;a href=“image\_2.jpg” data-fancybox=“gallery” data-caption=“Caption #2”&gt;
6. &lt;img src=“thumbnail\_2.jpg” alt=“” /&gt;
7. &lt;/a&gt;

[在CodePen上查看演示](https://codepen.io/fancyapps/pen/aYKzoY?editors=1000)

如果选择此方法，将应用默认设置。有关如何通过更改默认值或使用属性来定制示例的信息，请参阅 [选项](https://fancyapps.com/fancybox/3/document/#options)一节 `data-options`

有时有多个链接指向相同的来源，并在画廊中创建重复。为了避免这种情况，只需使用 `data-trigger`属性中用于`data-fancybox`其他链接的相同值的属性即可。可选地，使用 `data-index`attribute来指定起始元素的索引：

1. &lt;a data-trigger=“gallery” href=“javascript:;”&gt;
2. &lt;img src=“thumbnail\_1.jpg” alt=“” /&gt;
3. &lt;/a&gt;

[在CodePen上查看演示](https://codepen.io/fancyapps/pen/oqPKYp?editors=1000)

### 使用JavaScript进行初始化

用jQuery选择器选择你的元素（你可以使用任何有效的选择器）并调用该 `fancybox`方法：

1. $(‘\[data-fancybox=“gallery”\]’).fancybox({
2. // Options will go here
3. });

[在CodePen上查看演示](https://codepen.io/fancyapps/pen/dmKPYa?editors=1010)
有时可能需要将fancybox绑定到动态添加的元素。使用 `selector`选项为现在或将来存在的元素附加点击事件侦听器。例：

1. $().fancybox({
2. selector : ‘\[data-fancybox=“gallery”\]’,
3. loop : true
4. });

[在CodePen上查看演示](https://codepen.io/fancyapps/pen/LdrENX?editors=1010)

请记住，所选项目不会自动分组到图库中。您可以通过对`data-fancybox`属性使用相同的值来创建一个或多个组 ，类似于上一节中的示例。

### 使用Javascript

您也可以编程方式打开并关闭fancybox。以下是一些示例，请访问 [API](https://fancyapps.com/fancybox/3/document/#api)部分获取更多信息和演示。

显示简单信息：

1. $.fancybox.open(‘&lt;div class=“message”&gt;&lt;h2&gt;Hello!&lt;/h2&gt;&lt;p&gt;You are awesome!&lt;/p&gt;&lt;/div&gt;’);

[在CodePen上查看演示](https://codepen.io/fancyapps/pen/xWzOxR?editors=1010)
显示iframed页面：

1. $s.fancybox.open({
2. src : ‘link-to-your-page.html’,
3. type : ‘iframe’,
4. opts : {
5. afterShow : function( instance, current ) {
6. console.info( ‘done!’ );
7. }
8. }
9. });

[在CodePen上查看演示](https://codepen.io/fancyapps/pen/xWzOxR?editors=1010)

fancybox尝试根据给定的URL自动检测内容的类型。如果无法检测到，则也可以使用`data-type`属性（或 `type`选项）手动设置类型 。例：

1. &lt;a href=“images.php?id=123” data-type=“image” data-caption=“Caption”&gt;
2. 显示图片
3. &lt;/a&gt;

## 媒体类型

### 图片

使用fancybox的标准方式是使用链接到较大图像的许多缩略图：

1. &lt;a href=“image.jpg” data-fancybox=“images” data-caption=“My caption”&gt;
2. &lt;img src=“thumbnail.jpg” alt=“” /&gt;
3. &lt;/a&gt;

[在CodePen上查看演示](https://codepen.io/fancyapps/pen/VyLOJX?editors=1000)

默认情况下，fancybox会在显示图像之前完全预先载入图像。您可以选择立即显示图像。它将在接收数据时呈现并显示全尺寸图像。要做到这一点，一些属性是必要的：

- `data-width` – 图像的真实宽度
- `data-height` – 图像的真实高度

1. &lt;a href=“image.jpg” data-fancybox=“images” data-width=“2048” data-height=“1365”&gt;
2. &lt;img src=“thumbnail.jpg” /&gt;
3. &lt;/a&gt;

[在CodePen上查看演示](https://codepen.io/fancyapps/pen/aYKMBm?editors=1000)

您还可以使用这些 `width`和 `height`属性来控制图像的大小。这可以用来使图像在视网膜显示器上更清晰。例：

1. $(‘\[data-fancybox=“images”\]’).fancybox({
2. afterLoad : function(instance, current) {
3. var pixelRatio = window.devicePixelRatio || 1;
4. 
5. if ( pixelRatio &gt; 1.5 ) {
6. current.width = current.width / pixelRatio;
7. current.height = current.height / pixelRatio;
8. }
9. }
10. });

[在CodePen上查看演示](https://codepen.io/fancyapps/pen/pLKYez?editors=1010)

fancybox支持“srcset”，因此它可以根据视口宽度显示不同的图像。您可以使用它来改善移动用户的下载时间，并随着时间的推移节省带宽。例：

1. &lt;a href=“medium.jpg” data-fancybox=“images” data-srcset=“large.jpg 1600w, medium.jpg 1200w, small.jpg 640w”&gt;
2. &lt;img src=“thumbnail.jpg” /&gt;
3. &lt;/a&gt;

[在CodePen上查看演示](https://codepen.io/fancyapps/pen/ZxRPyb?editors=1000)
右键单击也可以保护图像免于下载。虽然这不能保护真正确定的用户，但它应该阻止绝大多数人将您的文件撕掉。可选地，将水印放在图像上。

1. $(‘\[data-fancybox\]’).fancybox({
2. protect: true
3. });

[在CodePen上查看演示](https://codepen.io/fancyapps/pen/wmXOqN)

### 视频

YouTube和Vimeo视频只需提供页面URL即可与fancyBox一起使用。直接链接到MP4视频或使用触发元素显示隐藏的`<video>`元素。

使用 `data-width`和 `data-height`属性来自定义视频尺寸和 `data-ratio`宽高比。

1. &lt;a data-fancybox href=“https://www.youtube.com/watch?v=\_sI\_Ps7JSEk”&gt;
2. YouTube video
3. &lt;/a&gt;
4. 
5. &lt;a data-fancybox href=“https://vimeo.com/191947042”&gt;
6. Vimeo video
7. &lt;/a&gt;
8. 
9. &lt;a data-fancybox data-width=“640” data-height=“360” href=“video.mp4”&gt;
10. Direct link to MP4 video
11. &lt;/a&gt;
12. 
13. &lt;a data-fancybox href=“#myVideo”&gt;
14. HTML5 video element
15. &lt;/a&gt;
16. 
17. &lt;video width=“640” height=“320” controls id=“myVideo” style=“display:none;”&gt;
18. &lt;source src=“https://www.html5rocks.com/en/tutorials/video/basics/Chrome\_ImF.mp4” type=“video/mp4”&gt;
19. &lt;source src=“https://www.html5rocks.com/en/tutorials/video/basics/Chrome\_ImF.webm” type=“video/webm”&gt;
20. &lt;source src=“https://www.html5rocks.com/en/tutorials/video/basics/Chrome\_ImF.ogv” type=“video/ogg”&gt;
21. Your browser doesn’t support HTML5 video tag.
22. &lt;/video&gt;

[在CodePen上查看演示](https://codepen.io/fancyapps/pen/gopGNq?editors=1010)
通过URL参数控制YouTube和Vimeo视频：

1. &lt;a data-fancybox href=“https://www.youtube.com/watch?v=\_sI\_Ps7JSEk&amp;amp;autoplay=1&amp;amp;rel=0&amp;amp;controls=0&amp;amp;showinfo=0”&gt;
2. YouTube video – hide controls and info
3. &lt;/a&gt;
4. 
5. &lt;a data-fancybox href=“https://vimeo.com/191947042?color=f00”&gt;
6. Vimeo video – custom color
7. &lt;/a&gt;

[在CodePen上查看演示](https://codepen.io/fancyapps/pen/Qmxoae?editors=1000)
通过JavaScript：

1. $(‘\[data-fancybox\]’).fancybox({
2. youtube : {
3. controls : 0,
4. showinfo : 0
5. },
6. vimeo : {
7. color : ‘f00’
8. }
9. });

[在CodePen上查看演示](https://codepen.io/fancyapps/pen/zWabWN?editors=1010)

### 内联HTML

对于内联内容，使用唯一标识创建隐藏元素：

1. &lt;div style=“display: none;” id=“hidden-content”&gt;
2. &lt;h2&gt;Hello&lt;/h2&gt;
3. &lt;p&gt;You are awesome.&lt;/p&gt;
4. &lt;/div&gt;

然后简单地创建一个链接，该链接的 `data-src`属性与您想要打开的元素的ID相匹配（前面有一个散列标记（＃）;在本例中 `#hidden-content`）：

1. &lt;a data-fancybox data-src=“#hidden-content” href=“javascript:;”&gt;
2. Trigger the fancybox
3. &lt;/a&gt;

[在CodePen上查看演示](https://codepen.io/fancyapps/pen/yKEryV?editors=1100)

该脚本将附加小关闭按钮（如果您尚未禁用 `smallBtn:false`），除了居中之外，不会应用任何样式。因此，您可以使用CSS轻松设置自定义尺寸。

### AJAX

要通过AJAX加载内容，您需要为`data-type="ajax"`链接添加一个 属性：

1. &lt;a data-fancybox data-type=“ajax” data-src=“my\_page.com/path/to/ajax/” href=“javascript:;”&gt;
2. AJAX content
3. &lt;/a&gt;

[在CodePen上查看演示](https://codepen.io/fancyapps/pen/wmXbvJ?editors=1100)

此外，可以使用该`data-filter`属性定义选择器以 仅显示响应的一部分。选择器可以是任何字符串，这是一个有效的jQuery选择器：

1. &lt;a data-fancybox data-type=“ajax” data-src=“my\_page.com/path/to/ajax/” data-filter=“#two” href=“javascript:;”&gt;
2. AJAX content
3. &lt;/a&gt;

[在CodePen上查看演示](https://codepen.io/fancyapps/pen/xWzNGe?editors=1100)

### IFRAME

如果内容可以显示在页面上，并且在iframe中的放置不会被该页面的脚本或安全配置阻止，则可以将其呈现在fancybox中：

1. &lt;a data-fancybox data-type=“iframe” data-src=“http://codepen.io/fancyapps/full/jyEGGG/” href=“javascript:;”&gt;
2. Webpage
3. &lt;/a&gt;
4. 
5. &lt;a data-fancybox data-type=“iframe” data-src=“https://mozilla.github.io/pdf.js/web/viewer.html” href=“javascript:;”&gt;
6. Sample PDF file
7. &lt;/a&gt;

[在CodePen上查看演示](https://codepen.io/fancyapps/pen/qoKGRW?editors=1000)
从iframe中访问和控制父窗口中的fancybox：

1. // Adjust iframe height according to the contents
2. parent.jQuery.fancybox.getInstance().update();
3. 
4. // Close current fancybox instance
5. parent.jQuery.fancybox.getInstance().close();

Iframe尺寸可以通过CSS控制：

1. .fancybox-slide–iframe .fancybox-content {
2. width : 800px;
3. height : 600px;
4. max-width : 80%;
5. max-height : 80%;
6. margin: 0;
7. }

如果需要，这些CSS规则可以被JS覆盖。

1. $(“\[data-fancybox\]”).fancybox({
2. iframe : {
3. css : {
4. width : ‘600px’
5. }
6. }
7. });

如果您还没有禁用iframe预加载（使用 `preload`选项），那么脚本将尝试计算内容尺寸，并将调整iframe的宽度/高度以适应其中的内容。请记住，由于 [相同的原产地政策](https://en.wikipedia.org/wiki/Same-origin_policy)，有一些限制。

此示例将禁用iframe预加载，并将显示iframe旁边的小关闭按钮而不是工具栏：

1. $(‘\[data-fancybox\]’).fancybox({
2. toolbar : false,
3. smallBtn : true,
4. iframe : {
5. preload : false
6. }
7. })

[在CodePen上查看演示](https://codepen.io/fancyapps/pen/rdKgmP)

更多内容请访问：<https://fancyapps.com/fancybox/3/document/>