Fancybox——學習（1）

轉載：http://www.helloweba.com/view-blog-65.html

Fancybox是一款優秀的jquery插件，它可以展現豐富的彈出層效果。前面咱們有文章介紹了facybox彈出層效果，相比facybox，fancybox顯得功能更爲齊全，它除了能夠加載DIV，圖片、圖片集、Ajax數據，還能加載SWF影片，iframe頁面等等。

查看演示  下載源碼

fancybox具備如下特性：

能夠加載DIV、圖片、圖片集、Ajax數據、SWF影片，iframe頁面等。

支持鍵盤方向鍵和ESC鍵。

豐富的參數設置和方法調用。

可擴展性強。

如何使用？

本文以DEMO中的Demo2爲例，講解fancybox的使用。

一、添加javascript引用和css文件的引用

<link rel="stylesheet" type="text/css" href="fancybox.css" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/fancybox.js"></script> 

二、HTML

<h4>圖片集，支持鍵盤方向鍵</h4> 
<p> 
   <a rel="group" href="images/b1.jpg" title="圖片標題"><img alt="" src="images/s1.gif" /></a> 
   <a rel="group" href="images/b2.jpg" title="圖片標題"><img alt="" src="images/s2.gif" /></a> 
   <a rel="group" href="images/b3.jpg" title="藍天白雲綠草"><img alt="" src="images/s3.gif" /></a> 
</p>  

三、調用fancybox

$(function(){ 
    $("a[rel=group]").fancybox({ 
        'titlePosition' : 'over', 
        'cyclic'        : true, 
        'titleFormat'    : function(title, currentArray, currentIndex, currentOpts) { 
                    return '<span id="fancybox-title-over">' + (currentIndex + 1) + 
 ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '</span>'; 
                } 
    }); 
}); 

 

注意，fancybox的參數設置格式爲：'key':'value'。titlePosition:設置圖片標題的顯示位置爲圖片上。cyclic：設置圖片瀏覽方式爲循環瀏覽。titleFormat：設置圖片標題的格式，能夠顯示圖片總數和當前圖片順序。

fancybox插件主要參數和方法一覽表

參數/方法	描述	默認值
基本
width	設置彈出串口的寬度，當內容爲swf,iframe或者單行文字時， 應該將'autoDimensions' 設置爲false	560
height	設置彈出串口的高度，當內容爲swf,iframe或者單行文字時， 應該將'autoDimensions' 設置爲false	340
cyclic	是否循環顯示，當內容爲圖片集時。	false
centerOnScroll	彈出窗口始終瀏覽器居中。	false
modal	是否使用模式窗口。當設置爲true時，應該同時將：'hideOnOverlayClick'，'hideOnContentClick'， 'enableEscapeButton'， 'showCloseButton' 設置爲false，並將'overlayShow' 設置爲true	false
titlePosition	標題的位置,能夠設置爲'outside', 'inside' or 'over'	'outside'
transitionIn, transitionOut	窗口顯示的方式，能夠設置爲'elastic', 'fade' or 'none'	'fade'
send	方法，向服務端發送裁剪圖片的數據，以便服務端接收參數進行處理， e.g: cropzoom.send('process.php','POST',{id=1},function(r){ alert(r); });
方法
$.fancybox.showActivity	顯示加載動畫
$.fancybox.hideActivity	隱藏加載動畫
$.fancybox.close	關閉窗口
$.fancybox.resize	自動調整窗口的高度使之與內容相適應
Centered	是否將選區居中，即顯示在容器的中心。

更多參數和方法請參照http://fancybox.net/api