jquery 灯箱插件 fancybox 2.x

当前位置: 首页 » 记录 » plug-in » jquery 灯箱插件 fancybox 2.x

分类: plug-in 623阅读阅读模式

首先,先上demo

 

简单示例:

1、引入相关文件

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

1.1、可选的插件 - 按钮

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

1.2、可选的插件 - 媒体

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

1.3、可选的插件 - 缩略图

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

 

2、html 部分

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

 

3、js 部分

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

 

附上 API 表

 

fancyBox -2.1.7 版本下载地址: 点击下载

 

完毕!

 

相关文章

评论一下

暂无评论