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
});
});
快速使用:
<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>
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>
<!-- FancyBox.js演示:uihtm.com/preview/19516.html -->