jquery.fancybox图片预览组件

笔记心得 0

源码地址:

https://github.com/fancyapps/fancybox

官网地址:https://fancyapps.com/

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>