jquery 灯箱插件 fancybox 2.x

2017-05-31 1839 plug-in

首先，先上demo。简单示例：

1、引入相关文件

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.7"></script>

1.1、可选的插件 - 按钮

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

1.2、可选的插件 - 媒体

<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

1.3、可选的插件 - 缩略图

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

2、html 部分

<a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt="" /></a>

3、js 部分

$(document).ready(function() {
$(".fancybox").fancybox();
});

附上 API 表。 fancyBox -2.1.7 版本下载地址：点击下载完毕！

原创文章，如若转载，请注明出处：http://loc.darlang.com/post/242.html

fancybox lightbox 灯箱插件

评论 (0)

分类目录

推荐文章