jQuery Colorbox彈窗插件使用教程小結、屬性設置詳解以及colorbox關閉

jQuery Colorbox是一款彈出層，內容播放插件，效果極佳，當然我主要是用來彈出圖片啦。

jQuery Colorbox不僅有彈性動畫效果，淡入淡出效果，幻燈片播放,寬度自定義，還能夠ajax加載html,iframe等等，最主要的是它還可以寫回調函數

效果演示地址：

1、http://www.phpddt.com/demo/colorbox/example1/

2、http://www.phpddt.com/demo/colorbox/example2/

3、http://www.phpddt.com/demo/colorbox/example3/

4、http://www.phpddt.com/demo/colorbox/example4/

5、http://www.phpddt.com/demo/colorbox/example5/

 

下載地址： https://github.com/jackmoore/colorbox

文檔地址：http://www.jacklmoore.com/colorbox/

一些使用的例子：

$('a.gallery').colorbox({rel:'gal'});

// Ajax
$('a#login').colorbox();

// Called directly, without assignment to an element:
$.colorbox({href:"thankyou.html"});

// Called directly with HTML
$.colorbox({html:"<h1>Welcome</h1>"});

// Colorbox can accept a function in place of a static value:
$("a.gallery").colorbox({rel: 'gal', title: function(){
  var url = $(this).attr('href');
  return '<a href="' + url + '" target="_blank">Open In New Window</a>';
}});

 

關閉colorbox事件：

寫法一： window.parent.$.fn.colorbox.close();

寫法二： parent.$.colorbox.close(); 

或者通過刷新父頁面關閉： window.parent.location.reload(); 

 

jquery colorbox設置翻譯：

屬性	默認值	描述
transition	"elastic"	過渡型。可以設置為“彈性”，“消失”，或“無”。
speed	350	套的褪色和彈性轉換速度，以毫秒為單位。
href	false	這可以被用來作為一種替代錨URL或聯想到的URL非錨的元素，如圖片或表格按鈕。$（“H1”.colorbox（的HREF）{ }”的民族性與地域性：”）；
title	false	這可以作為一個錨定的方式－。
rel	false	這可以作為一個錨REL的替代方式。這允許用戶在一個畫廊集團任何元素的組合，或改變現有的關系所以元素不歸。$（“a.gallery”.colorbox（REL）：“group1”{ }）；注：值也可以設置為“nofollow”禁用分組。
scalePhotos	true	如果是真的，如果最大，最大高度，innerwidth，innerheight，寬度或高度已經確定，ColorBox會規模的照片符合這些價值觀。
scrolling	true	如果為false，ColorBox將隱藏溢出內容滾動條。這可以用於與調整相結合的方法（見下文）為一個平穩的過渡，如果你添加內容到方式已經打開的一個實例。
opacity	0.85	疊加的不透明度。范圍：0到1。
open	false	如果屬實，將立即打開方式。
returnFocus	true	如果屬實，將回來時的方式出口到元是從。
trapFocus	true	如果是真的，鍵盤焦點將限於ColorBox的導航和內容。
fastIframe	true	如果為false，加載圖形去除和oncomplete事件將推遲到iframe的內容已經完全加載。
preloading	true	允許預壓下”、“前”的內容在一個組，在目前的內容加載完畢。設置為false禁用。
overlayClose	true	如果為false，禁用關閉的方式通過點擊背景疊加。
escKey	true	如果為假，將禁用“ESC”鍵關閉方式。
arrowKey	true	如果為假，將禁用左、右方向鍵從組中的項目之間導航。
loop	true	如果為假，將禁用環回組開始時的最后一個元素的能力。
data	false	提交GET或POST值通過一個Ajax請求。數據屬性會完全像jQuery的。（）數據參數，如使用AJAX處理（）的方式。
className	false	增加一個給定的類的方式和覆蓋。
fadeOut	300	毫秒淡出速度，集，當關閉方式。
closeButton	true	設置為false將關閉按鈕。
Internationalization
current	"image {current} of {total}"	文本或HTML的組計數器在觀看一組。{ }和{ }當前總的檢測和實際的數字方式運行時更換。
previous	"previous"	文本或HTML以前在觀看一組按鈕。
next	"next"	文本或HTML的下一個按鈕在觀看一組。
close	"close"	文本或HTML for the Close按鈕。the ESC關閉colorbox也將是關鍵。
xhrError	"This content failed to load."	錯誤消息時，Ajax的內容對於一個給定的URL不能加載。
imgError	"This image failed to load."	錯誤消息時給出一個鏈接到一個圖像加載失敗。
Content Type
iframe	false	如果是真的，指定的內容應在iframe中顯示。
inline	false	如果是真的，從當前文檔的內容可以通過href屬性jQuery選擇器顯示jQuery對象，或。 使用A /選擇器：$（“#內聯”.colorbox（）{內嵌鏈接：威脅：“# myform”}）； // Using a jQuery object:var $form = $("#myForm");$("#inline").colorbox({inline:true, href:$form});
html	false	顯示一個字符串的HTML或文本：$.colorbox({html:"<p>Hello</p>"});
photo	false	如果是真的，這個設置軍隊的方式來顯示鏈接的照片。用這個當照片自動檢測失敗（如使用URL的照片。PHP &#39;而不是&#39;照片.jpg”）
ajax		這個屬性實際上不作為的方式承擔所有的所有應被視為Ajax或照片，除非另一個指定的內容類型。
Dimensions
width	false	設定一個固定的總寬度。這包括邊框和按鈕。例如：“100%”、“500px”，或500
height	false	設定一個固定的總高度。這包括邊框和按鈕。例如：“100%”、“500px”，或500
innerWidth	false	這是一個替代“寬度”用來設置一個固定的內部寬度。這不包括邊框和按鈕。例如：“50%”、“500px”，或500
innerHeight	false	這是另一種“高度”用來設置一個固定的內部高度。這不包括邊框和按鈕。例如：“50%”、“500px”，或500
initialWidth	300	設置初始寬度，正在加載任何內容之前。
initialHeight	100	設置初始高度，正在加載任何內容之前。
maxWidth	false	設置內容的最大寬度。例如：“100%”，500，“500px”
maxHeight	false	設置內容的最大高度。例如：“100%”，500，“500px”
Slideshow
slideshow	false	如果是真的，增加了一個自動的幻燈片內容組/畫廊。
slideshowSpeed	2500	設置幻燈片的速度，以毫秒為單位。
slideshowAuto	true	如果是真的，幻燈片將自動開始播放。
slideshowStart	"start slideshow"	為幻燈片開始按鈕文字。
slideshowStop	"stop slideshow"	停止自動滑動按鈕的文本
Positioning
fixed	false	如果是真的，顏色框將顯示在一個固定的位置，在游客的視口。這是不同於默認的絕對定位相對於文檔。
top	false	接受一個像素或百分比值（50，“50px”、“10%”）。而不是使用被集中在視口的默認位置控制方式的垂直定位。
bottom	false	接受一個像素或百分比值（50，“50px”、“10%”）。而不是使用被集中在視口的默認位置控制方式的垂直定位。
left	false	接受一個像素或百分比值（50，“50px”、“10%”）。控制方式的水平定位而不是使用被集中在視口的默認位置。
right	false	接受一個像素或百分比值（50，“50px”、“10%”）。控制方式的水平定位而不是使用被集中在視口的默認位置。
reposition	true	復位方式如果窗口的Resize事件觸發。
Retina Images
retinaImage	false	如果是真的，方式將減少與屏幕的像素比目前的照片
retinaUrl	false	如果是真的，該設備具有高分辨率顯示器，ColorBox會與retinasuffix擴展替換當前照片的文件擴展名
retinaSuffix	"@2x.$1"	如果retinaurl真實設備具有高分辨率顯示器，href值將其延伸擴展這個后綴。例如，默認值會改變`相片，JPG `到` [e-mail] `
Callbacks
onOpen	false	回調，火災對ColorBox開始打開之前。
onLoad	false	回調，火災就在試圖加載的目標內容。
onComplete	false	回調后加載內容顯示火災。
onCleanup	false	回調，在關閉過程的生火。
onClosed	false	回調，火災一旦ColorBox關閉。

 

 

 

公共方法

$.colorbox()	這種方法允許您調用的方式而無需將它分配給一個元素。.colorbox美元（的HREF：“login.php”{ }）；
$.colorbox.next() $.colorbox.prev()	這些方法移動到下一個和上一組的項目，按“下一步”或“前進”按鈕相同。
$.colorbox.close()	此方法啟動關閉序列，不立即完成。燈箱將完全關閉，只有當cbox_closed事件/親密的回調是解雇
$.colorbox.element()	此方法用於獲取方式是與當前的HTML元素。返回一個包含元素的jQuery對象。var $element = $.colorbox.element();
$.colorbox.resize()	這允許的方式來調整基於自己的自動計算，或為特定的大小。這一定是Colorbox之后的內容有手動加載稱為。可選的參數對象可以接受寬度或innerwidth和高度或innerheight。沒有指定寬度或高度，ColorBox會嘗試重新計算其當前內容的高度。
$.colorbox.remove()	刪除所有痕跡的方式從文件。不一樣的方式（），其中美元。把顏色框起來供以后使用。

 

 

 

事件：

cbox_open		當Colorbox第一次打開觸發器，但在幾個關鍵變量的賦值發生。
cbox_load		觸發器在開始的階段，內容類型確定裝。
cbox_complete		觸發時，過渡已經完成，新加載的內容已被發現。
cbox_cleanup		觸發器為關閉方法開始。
cbox_closed		觸發器為近端的方法