今天給大家介紹的jquery圖片播放插件叫Fancybox，相比LightBox來說，Fancybox相對龐大點，配置也更豐富一些，相信你會喜歡的。

Fancybox的項目主頁地址：http://fancybox.net/

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="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

可選 - 如果需要用到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();

Fancybox的API和配置選項說明