jQuery弹出窗口插件FancyBox用法教程

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"(www.111cn.net)></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>from:http://www.111cn.net/wy/jquery/47982.htm

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

<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>

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

<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

2、引入样式文件：

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen">

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

　　A、图片元素

<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" kesrc="image_small.jpg" alt=""></a>

　　B、普通文本

<a id="inline" href="#data" kesrc="#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="image_big_1.jpg"><img src="image_small_1.jpg" alt=""></a>
 <a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""></a>     
  
 <a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""></a> 
 <a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt=""></a> 
  
 $("a.grouped_elements").fancybox();

本文转自http://www.111cn.net/wy/jquery/47982.htm，

另一篇关于FancyBox使用的文章：http://www.cnblogs.com/qinpengming/archive/2013/05/26/3099848.html