合作(zuò)
咨詢
建站(zhàn)咨詢
Fancybox豐富的彈出層效果
- 作(zuò)者：admin
- 發表時(shí)間(jiān)：2013-07-02 14:17:25
- 來(lái)源：未知
Fancybox是一款優秀的jquery插件，它能夠展示豐富的彈出層效果。前面我們有(yǒu)文章介紹了facybox彈出層效果，相比facybox，fancybox顯得(de)功能更為(wèi)齊全，它除了可(kě)以加載DIV，圖片、圖片集、Ajax數(shù)據，還(hái)能加載SWF影(yǐng)片，iframe頁面等等。
fancybox具有(yǒu)以下特性：
可(kě)以加載DIV、圖片、圖片集、Ajax數(shù)據、SWF影(yǐng)片，iframe頁面等。
支持鍵盤方向鍵和(hé)ESC鍵。
豐富的參數(shù)設置和(hé)方法調用。
可(kě)擴展性強。
如何使用？
本文以DEMO中的Demo2為(wèi)例，講解fancybox的使用。
1、添加javascript引用和(hé)css文件的引用
2、HTML
圖片集，支持鍵盤方向鍵
3、調用fancybox
$(function(){
$("a[rel=group]").fancybox({
'titlePosition' : 'over',
'cyclic' : true,
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '' + (currentIndex + 1) +
' / ' + currentArray.length + (title.length ? ' ' + title : '') + '';
}
});
});
注意，fancybox的參數(shù)設置格式為(wèi)：'key':'value'。titlePosition:設置圖片标題的顯示位置為(wèi)圖片上(shàng)。cyclic：設置圖片浏覽方式為(wèi)循環浏覽。titleFormat：設置圖片标題的格式，可(kě)以顯示圖片總數(shù)和(hé)當前圖片順序。
fancybox插件主要參數(shù)和(hé)方法一覽表
| 參數(shù)/方法 | 描述 | 默認值 |
| 基本 | ||
| width | 設置彈出串口的寬度，當內(nèi)容為(wèi)swf,iframe或者單行(xíng)文字時(shí)，應該将'autoDimensions' 設置為(wèi)false | 560 |
| height | 設置彈出串口的高(gāo)度，當內(nèi)容為(wèi)swf,iframe或者單行(xíng)文字時(shí)，應該将'autoDimensions' 設置為(wèi)false | 340 |
| cyclic | 是否循環顯示，當內(nèi)容為(wèi)圖片集時(shí)。 | false |
| centerOnScroll | 彈出窗口始終浏覽器(qì)居中。 | false |
| modal | 是否使用模式窗口。當設置為(wèi)true時(shí)，應該同時(shí)将：'hideOnOverlayClick'，'hideOnContentClick'，'enableEscapeButton'，'showCloseButton' 設置為(wèi)false，并将'overlayShow' 設置為(wèi)true | false |
| titlePosition | 标題的位置,可(kě)以設置為(wèi)'outside', 'inside' or 'over' | 'outside' |
| transitionIn, transitionOut | 窗口顯示的方式，可(kě)以設置為(wèi)'elastic', 'fade' or 'none' | 'fade' |
| send |
方法，向服務端發送裁剪圖片的數(shù)據，以便服務端接收參數(shù)進行(xíng)處理(lǐ)， e.g: cropzoom.send('process.php','POST',{id=1},function(r){ alert(r); }); |
|
| 方法 | ||
| $.fancybox.showActivity | 顯示加載動畫(huà) | |
| $.fancybox.hideActivity | 隐藏加載動畫(huà) | |
| $.fancybox.close | 關閉窗口 | |
| $.fancybox.resize | 自動調整窗口的高(gāo)度使之與內(nèi)容相适應 | |
| Centered | 是否将選區(qū)居中，即顯示在容器(qì)的中心。 | |
更多(duō)參數(shù)和(hé)方法請(qǐng)參照http://fancybox.net/api
聯系我們
一切良好工作(zuò)的開(kāi)始，都需相互之間(jiān)的溝通(tōng)搭橋，歡迎咨詢。
