效果预览

Demo源码下载

Fancybox的特点如下：

1. 可以支持图片、html文本、flash动画、iframe以及ajax的支持
2. 可以自定义播放器的CSS样式
3. 可以以组的形式进行播放
4. 如果将鼠标滚动插件（mouse wheel plugin）包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片
5. Fancybox播放器支持投影，更有立体的感觉

Fancybox使用方法：

1、引入jquery核心库和Fancybox插件库

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><script type="text/javascript" src="http://www.mamicode.com/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

可选 - 如果需要用到fancy transition（一些动画效果）你还需要引入以下脚本
 

<script type="text/javascript" src="http://www.mamicode.com/fancybox/jquery.easing-1.4.pack.js"></script>

可选 - 如果需要支持鼠标滚轮滚动效果你还需要引入以下脚本
 

<script type="text/javascript" src="http://www.mamicode.com/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

2、添加样式表文件
 

<link rel="stylesheet" href="http://www.mamicode.com/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen">

3、在页面上创建链接元素
A、图片元素
 

<a id="single_image" href="http://www.mamicode.com/image_big.jpg"><img src="http://www.mamicode.com/image_small.jpg" kesrc="http://www.mamicode.com/image_small.jpg" ></a>

B、普通文本
 

<a id="inline" href="http://www.mamicode.com/#data" kesrc="http://www.mamicode.com/#data">This shows content of element who has id="data"</a> <div style="display: none;">    <div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

C、Iframe
 

<a href="http://www.example?iframe">This goes to iframe</a> 或者 <a class="iframe" href="http://www.example">This goes to iframe</a>

D、Ajax
 

<a href="http://www.example/data.php">This takes content using ajax</a>

如果你要显示描述信息，可以在链接上加上title，将描述信息放到title中。

4、最终的jquery初始化代码

$(document).ready(function() {     /* 最基本的，使用了默认配置 */         $("a#single_image").fancybox();         /* 使用了自定义配置 */         $("a#inline").fancybox({        ‘hideOnContentClick‘: true    });     /* 一下配置支持组播放 */         $("a.group").fancybox({        ‘transitionIn‘  :   ‘elastic‘,        ‘transitionOut‘ :   ‘elastic‘,        ‘speedIn‘       :   600,         ‘speedOut‘      :   200,         ‘overlayShow‘   :   false    });     });

用rel标签来创建相册
 

<a class="grouped_elements" rel="group1" href="http://www.mamicode.com/image_big_1.jpg"><img src="http://www.mamicode.com/image_small_1.jpg" ></a><a class="grouped_elements" rel="group1" href="http://www.mamicode.com/image_big_2.jpg"><img src="http://www.mamicode.com/image_small_2.jpg" ></a>      <a class="grouped_elements" rel="group2" href="http://www.mamicode.com/image_big_3.jpg"><img src="http://www.mamicode.com/image_small_3.jpg" ></a> <a class="grouped_elements" rel="group2" href="http://www.mamicode.com/image_big_4.jpg"><img src="http://www.mamicode.com/image_small_4.jpg" ></a>  $("a.grouped_elements").fancybox();

Fancybox的API和配置选项说明

jquery图片播放插件Fancybox（灯箱）