4-06 2,183 views
官网地址
http://fancyapps.com/fancybox/3/
document:http://fancyapps.com/fancybox/3/docs/#usagegithub
https://github.com/fancyapps/fancybox兼容性
# jquery
jQuery 3+ 推荐, 但 fancybox 仍可以在 jQuery 1.9.1+ and jQuery 2+ 上运行
# 浏览器兼容
Chrome
Firefox
IE10/11
Edge
iOS Safari
Android 7.0 Tablet使用方式
<!-- 1. Add latest jQuery and fancybox files -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
</head>
<body>
<a data-fancybox="gallery" href="1.jpg"><img src="1.jpg"></a>
<a data-fancybox="gallery" href="2.jpg"><img src="2.jpg"></a>
<a data-fancybox="gallery" href="3.jpg"><img src="3.jpg"></a>
<a data-fancybox="gallery" href="4.jpg"><img src="4.jpg"></a>
<a data-fancybox="gallery" href="5.jpg"><img src="5.jpg"></a>
<a data-fancybox="gallery" href="6.jpg"><img src="6.jpg"></a>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
</body>
</html>demo
