Fancybox官网：http://fancybox.net/

Fancybox的特点如下：

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

Fancybox使用方法：

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

 
  
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
  2. <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
 
  
可选 - 如果需要用到fancy transition（一些动画效果）你还需要引入以下脚本
 
  
 
  
  1. <script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script> 
 
  
可选 - 如果需要支持鼠标滚轮滚动效果你还需要引入以下脚本
 
  
 
  
  1. <script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script> 
 
  
2、添加样式表文件
 
  
 
  
  1. <link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen"> 
 
  
3、在页面上创建链接元素
 A、图片元素
 
  
 
  
  1. <a id="single_p_w_picpath" href="p_w_picpath_big.jpg"><img src="p_w_picpath_small.jpg" kesrc="p_w_picpath_small.jpg" alt=""></a> 
 
  
B、普通文本
 
  
 
  
  1. <a id="inline" href="#data" kesrc="#data">This shows content of element who has id="data"</a> 
  2.   
  3. <div style="display: none;"> 
  4.     <div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
  5. </div> 
 
  
C、Iframe
 
  
 
  
  1. <a href="http://www.example?iframe">This goes to iframe</a> 
  2.   
  3. 或者 
  4.   
  5. <a class="iframe" href="http://www.example">This goes to iframe</a> 
 
  
D、Ajax
 
  
 
  
  1. <a href="http://www.example/data.php">This takes content using ajax</a> 
 
  
如果你要显示描述信息，可以在链接上加上title，将描述信息放到title中。
 
  
4、最终的jquery初始化代码
 
  
 
  
  1. $(document).ready(function() {     
  2.     $("a#single_p_w_picpath").fancybox(); 
  3.       
  4.     $("a#inline").fancybox({ 
  5.         'hideOnContentClick': true 
  6.     }); 
  7.         
  8.     $("a.group").fancybox({ 
  9.         'transitionIn'  :   'elastic', 
  10.         'transitionOut' :   'elastic', 
  11.         'speedIn'       :   600,  
  12.         'speedOut'      :   200,  
  13.         'overlayShow'   :   false 
  14.     }); 
  15.       
  16. }); 
 
  
用rel标签来创建相册
 
  
 
  
  1. <a class="grouped_elements" rel="group1" href="p_w_picpath_big_1.jpg"><img src="p_w_picpath_small_1.jpg" alt=""></a> 
  2. <a class="grouped_elements" rel="group1" href="p_w_picpath_big_2.jpg"><img src="p_w_picpath_small_2.jpg" alt=""></a>      
  3.   
  4. <a class="grouped_elements" rel="group2" href="p_w_picpath_big_3.jpg"><img src="p_w_picpath_small_3.jpg" alt=""></a>  
  5. <a class="grouped_elements" rel="group2" href="p_w_picpath_big_4.jpg"><img src="p_w_picpath_small_4.jpg" alt=""></a>  
  6.   
  7. $("a.grouped_elements").fancybox();