源码地址:
https://github.com/fancyapps/fancybox
fancyBox是一个JavaScript库,它以优雅的方式展示图片,视频和一些html内容。它包含你所期望的一切特性—支持手势,响应式和高度自定义。
目前版本3.x系列。
支持浏览器:
Chrome
Firefox
IE10/11
Edge
iOS Safari
Android 7.0 Tablet
使用方式,引用jquery后引入fancy的js,css。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="jquery.fancybox.min.css"> <script src="jquery.min.js"></script> <script src="jquery.fancybox.min.js"></script> </head> <body> </body> </html>
支持的媒体类型:
Images
Video
Iframe
Inline
Ajax
大小图案例
data-fancybox:组件标识,识别标识
data-caption:媒体的标题介绍
<a href="大图1" data-fancybox="images" data-caption="标题1"><img src="小图1"></a> <a href="大图2" data-fancybox="images" data-caption="标题2"><img src="小图2"></a>
大小图分组案例
<a href="大图1" data-fancybox="images" data-caption="标题1"><img src="小图1"></a> <a href="大图2" data-fancybox="images" data-caption="标题2"><img src="小图2"></a> <hr> <a href="大图3" data-fancybox="groupTwo" data-caption="标题3"><img src="小图3"></a> <a href="大图4" data-fancybox="groupTwo" data-caption="标题4"><img src="小图4"></a>
视频弹框播放案例
<a href="视频" data-fancybox data-caption="视频介绍"><img src="视频图"></a>