jquery.fancybox 是一个好用方便的网页弹窗插件。
fancyBox3 中文文档
译文永久地址：https://kangkai124.github.io/fancybox/
说明：本文档仅供参考，更新不及时请查看官方文档
1. 介绍
fancyBox是一个JavaScript库，它以优雅的方式展示图片，视频和一些html内容。它包含你所期望的一切特性—支持手势，响应式和高度自定义。
1.1 依赖
推荐jQuery 3+，但是fancyBox仍支持jQery 1.9.1+和jQuery 2+。
注意
如果你在图片缩放时遇到了问题，请升级jQuery到最近版本（至少v3.2.1）。
1.2 兼容
fancyBox支持触摸操作，而且支持缩放等手势操作。对移动端和PC端都十分合适。
2. 配置
可以通过引入.css和.js到html文档中来使用fancyBox。确保在这之前引入了jQuery库。下面是使用fancyBox的一个基本的HTML模板：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My page</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
</head>
<body>
<!-- Your HTML content goes here -->
<!-- JS -->
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.fancybox.min.js"></script>
</body>
</html>
2.1 下载fancyBox
可以在GIthub下载最新的版本。
或者直接引用cdnjs—https://cdnjs.com/libraries/fancybox。
插件还提供了一些在线安装的方法，小编还没有用过就不介绍了。
3. 使用
3.1 使用data属性初始化
最基本的用法是通过添加data-fancybox属性到一个超链接标签。标题可以通过data-capiton添加。例如：
<a href="image.jpg" data-fancybox data-caption="My caption">
<img src="thumbnail.jpg" alt="" />
</a>
3.2 使用JavaScript初始化
使用jQuery选择器选择一个元素，然后调用fancybox方法：
<script type="text/javascript">
$("[data-fancybox]").fancybox({
// Options will go here
});
</script>使用这种方式，只有被选中的元素才可以触发点击事件。
为了可以现在或之后存在的元素都可以触发点击事件，使用selector选项。例如：
$().fancybox({
selector : '[data-fancybox="images"]',
loop : true
});如果你有一组元素，组内元素使用相同的data-fancybox值就可以组成一个相册。不同的组应该使用不同的属性值加以区分。
fancybox支持的媒体类型：imgeas,video,ajax ,iframe 一般都会自动判断。 也可以手工指定。 一般的用户以上信息即可应用。
