fancyBox
2019-08-29 本文已影响0人
躺在家里干活
一款优秀的弹出框Jquery插件
源码解读，快速上手
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引包 -->
<link href="https://cdn.bootcss.com/fancybox/3.1.20/jquery.fancybox.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/fancybox/3.1.20/jquery.fancybox.js"></script>
</head>
<body>
<p>
<a href="https://c1.staticflickr.com/9/8148/29324593462_abebaddc38_k.jpg" data-fancybox="group" data-caption="图片文字说明1">
<img src="https://c1.staticflickr.com/9/8148/29324593462_f890687b7a_m.jpg" />
</a>
<a href="https://c2.staticflickr.com/6/5499/30972532232_051e1dc57e_h.jpg" data-fancybox="group" data-caption="图片文字说明2">
<img src="https://c2.staticflickr.com/6/5499/30972532232_e9a298a0c5_m.jpg" />
</a>
<a href="https://farm1.staticflickr.com/560/31434966252_8e1bc946da_b_d.jpg" data-fancybox="group" data-caption="图片文字说明3">
<img src="https://farm1.staticflickr.com/560/31434966252_8e1bc946da_m_d.jpg" />
</a>
</p>
</body>
</html>
属性
- data-fancybox：分组，每个项目使用相同的属性值来创建一个库。每个组应该有一个唯一的值：data-fancybox="group"
- data-caption：图片的的标题： data-caption="图片文字说明1"
- data-type：fancybox根据给定的网址自动检测内容的类型。如果无法检测到，也可以使用data-type属性手动设置类型：
<a href="xxx?id=1" data-type="image" data-caption="Caption">
显示图像
</a>
- data-srcset:可以根据视口宽度显示不同的图像。您可以使用它来改善移动用户的下载时间，并可以节省带宽。例：
<a href="medium.jpg" data-fancybox="images" data-srcset="large.jpg 1600w, medium.jpg 1200w, small.jpg 640w">
<img src="thumbnail.jpg" />
</a>
- data-src:要通过AJAX加载内容，您需要data-type="ajax"在链接中添加一个属性
<a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" data-filter="#two" href="javascript:;">
AJAX content
</a>
- data-options:可以通过向data-options元素添加属性来设置每个元素的自定义选项。此属性应包含正确格式化的JSON对象：
<a data-fancybox data-options='{"caption" : "My caption", "src" : "https://codepen.io/about/", "type" : "iframe"}' href="javascript:;" class="btn">
Open external page
</a>
此处仅列举以上内容，详情可以查询fancyBox官网API
