FancyBox.js基于JQuery图集弹层插件用法

FancyBox是一款基于 jquery 开发的类 Lightbox 插件。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽，该 lightbox 除了能够展示图片之外，还可以展示 iframed 内容， 通过 css 自定义外观。
相对与 Lightbox 而言，阴影效果更好。但是比 Lightbox 绚丽。
使用很是简单，可以参照 Lightbox，修改添加代码。

示例代码：

$(document).ready(function() { 
	/* This is basic - uses default settings */ 
	$("a#single_image").fancybox(); 
	/* Using custom settings */ 
	$("a#inline").fancybox({ 'hideOnContentClick': true }); 
	$("a.group").fancybox({ 
		'zoomSpeedIn': 300, 
		'zoomSpeedOut': 300, 
		'overlayShow': false 
	}); 
});
1
2
3
4
5
6
7
8
9
10
11

快速使用：

<script src="https://code.jquery.com/jquery-3.3.1.min.js">script>
<link href="/path/to/jquery.fancybox.min.css" rel="stylesheet" />
<script src="/path/to/jquery.fancybox.min.js">script>
1
2
3

HTML创建链接

<a data-fancybox="gallery" href="big_1.jpg">
  <img src="small_1.jpg" />
a>

<a data-fancybox="gallery" href="big_2.jpg">
  <img src="small_2.jpg" />
a>


1
2
3
4
5
6
7
8
9