Jquery外掛程式之Fancybox豐富的彈出層效果附源碼下載_jquery

Fancybox是一款優秀的jquery外掛程式，它能夠展示豐富的彈出層效果。前面我們有文章介紹了facybox彈出層效果，相比facybox，fancybox顯得功能更為齊全，它除了可以載入DIV，圖片、圖片集、Ajax資料，還能載入SWF影片，iframe頁面等等。

效果示範     源碼下載

fancybox 特點：

可以支援圖片、html 文本、flash 動畫、iframe 以及 ajax 的支援；
可以自訂播放器的 css 樣式；
可以以組的形式進行播放；
如果將滑鼠滾動外掛程式（mouse wheel plugin）包含進來的話 fancybox 還能支援滑鼠滾輪滾動來翻閱圖片；
fancybox 播放器支援投影，更有立體的感覺。

支援鍵盤方向鍵和ESC鍵。
豐富的參數設定和方法調用。
可擴充性強。

如何使用？

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

1、添加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> 

2、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> 

3、調用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	是否將選區置中，即顯示在容器的中心。

以上內容是關於Jquery外掛程式之Fancybox豐富的彈出層效果附源碼下載的全部敘述，希望大家喜歡。