jQuery Fancybox插件使用參數詳解

今天給你們介紹的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使用方法：

一、引入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>

二、添加樣式表文件

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

三、在頁面上建立連接元素

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中。

四、最終的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和配置選項說明

屬性名	默認值	簡要說明
padding	10	瀏覽框內邊距，和css中的padding一個意思
margin	20	瀏覽框外邊距，和css中的margin一個意思
opacity	false	若是爲true，則fancybox在動畫改變的時候透明度能夠跟着改變
modal	false	若是爲true，則'overlayShow' 會被設成 'true' ， 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' 會被設成 'false'
cyclic	false	若是爲true，相冊會循環播放
scrolling	'auto'	設置overflow的值來建立或隱藏滾動條，能夠設置成 'auto', 'yes', or 'no'
width	560	設置iframe和swf的寬度，若是 'autoDimensions'爲 'false'，這也能夠設置普通文本的寬度
height	340	設置iframe和swf的高度，若是 'autoDimensions'爲 'false'，這也能夠設置普通文本的高度
autoScale	true	若是爲true，fancybox能夠自適應瀏覽器窗口大小
autoDimensions	true	在內聯文本和ajax中，設置是否動態調整元素的尺寸，若是爲true，請確保你已經爲元素設置了尺寸大小
centerOnScroll	false	若是爲true，當你滾動滾動條時，fancybox將會一直停留在瀏覽器中心
ajax	{ }	和jquery的ajax調用選項同樣 注意: 'error' and 'success' 這兩個回調事件會被fancybox重寫
swf	{wmode: 'transparent'}	swf的設置選項
hideOnOverlayClick	true	若是爲true則點擊遮罩層關閉fancybox
hideOnContentClick	false	若是爲true則點擊播放內容關閉fancybox
overlayShow	true	若是爲true，則顯示遮罩層
overlayOpacity	0.3	遮罩層的透明度（範圍0-1）
overlayColor	'#666'	遮罩層的背景顏色
titleShow	true	若是爲true，則顯示標題
titlePosition	'outside'	設置標題顯示的位置.能夠設置成 'outside', 'inside' 或 'over'
titleFormat	null	能夠自定義標題的格式
transitionIn, transitionOut	'fade'	設置動畫效果. 能夠設置爲 'elastic', 'fade' 或 'none'
speedIn, speedOut	300	fade 和 elastic 動畫切換的時間間隔, 以毫秒爲單位
changeSpeed	300	切換時fancybox尺寸的變化時間間隔（即變化的速度），以毫秒爲單位
changeFade	'fast'	切換時內容淡入淡出的時間間隔（即變化的速度）
easingIn, easingOut	'swing'	爲 elastic 動畫使用 Easing
showCloseButton	true	若是爲true，則顯示關閉按鈕
showNavArrows	true	若是爲true，則顯示上一張下一張導航箭頭
enableEscapeButton	true	若是爲true，則啓用ESC來關閉fancybox
onStart	null	回調函數，加載內容是觸發
onCancel	null	回調函數，取消加載內容後觸發
onComplete	null	回調函數，加載內容完成後觸發
onCleanup	null	回調函數，關閉fancybox前觸發
onClosed	null	回調函數，關閉fancybox後觸發