jQuery的快顯視窗外掛程式colorbox

  jQuery的快顯視窗外掛程式colorbox

官方網站：http://colorpowered.com/colorbox/

 支援 照片，照片組，投影片，ajax，內聯 和 iframe 架構。 通過CSS 控制外觀，使用使用者可以很容易重新定製外觀。 不需要更改 ColorBox 的 javascript 檔案就可以重新設定其行為。 可以依靠 callback & event-hooks 進行拓展，不需要修改原始碼。 非常友好，不需要修改現有的 HTML，所有的選項都通過 JS 設定。

 

介紹

colorbox()函數使用一堆key/value對象和一個可選的callback函數

格式：$('selector').colorbox({key:value}, callback);

例子： $('a.gallery').colorbox({transition:'fade', speed:500});

還是例子：$('button').colorbox({href:"thankyou.html"});

 

設定的值	預設值	介紹
transition	"elastic"	過渡效果，可以是"elastic", "fade", or "none".
speed	350	設定過渡效果的期間，毫秒
href	false	Example:$('h1').colorbox({href:"welcome.html"}) 這個用來設定一個錨標記的值或者一個不是錨的元素，例如映像或者表單的按鈕，例如：
title	false	這可以為Colorbox設定一個標題
rel	false	Example:$('#example a').colorbox({rel:'group1'}) 這個可以根據元素的rel屬性設定要顯示的元素集合，也可以覆蓋一個存在的rel屬性
width	false	Example: "100%", "500px", or 500 設定寬度，包括邊框和按鈕
height	false	Example: "100%", "500px", or 500 設定高度，包括邊框和按鈕
innerWidth	false	Example: "50%", "500px", or 500 這個可以設定一個固定的內大小，包括邊框和按鈕
innerHeight	false	Example: "50%", "500px", or 500 這個可以設定一個固定的內高度，包括邊框和按鈕
initialWidth	300	設定初始化寬度
initialHeight	100	設定初始化高度
maxWidth	false	Example: "100%", 500, "500px" 設定內容的最大寬度
maxHeight	false	Example: "100%", 500, "500px" 設定內容的最大高度
scalePhotos	true	如果是true且maxWidth, maxHeight, innerWidth, innerHeight, width, 或者 height 被設定， Colorbox會縮放圖片以使用邊框
scrolling	true	如果是false,Colorbox不會為了溢出元素設定捲軸
iframe	false	如果是true，元素會在Iframe中顯示
inline	false	Example: $("#inline").colorbox({inline:true, href:"#myForm"}); 如果是true,jQuery選取器可以用來選擇要顯示的元素。例如：
html	false	Example: $.fn.colorbox({html:' Hello'}); 這個是直接讓你顯示HTML代碼，例
photo	false	如果為true，ColorBox只會把元素按照圖片顯示，防止類似photo.php?pic=1這樣的串連被誤認為是網頁
opacity	0.85	遮罩層不透明度 從0-1之間取值
open	false	如果為true,ColorBox會自動開啟
preloading	true	如果為True,ColorBox會自動預載要顯示圖片
overlayClose	true	為true單擊遮罩層就可以把ColorBox關閉
slideshow	false	為True，會自動滾動圖片
slideshowSpeed	2500	設定時間，毫秒
slideshowAuto	true	為tuue，滑動會自動開始
slideshowStart	"start slideshow"	開始自動滑動按鈕的文本
slideshowStop	"stop slideshow"	停止自動滑動按鈕的文本
current	"{current} of {total}"	常值內容：現在正在顯示的元素序號
previous	"previous"	“上一個”按鈕的文本
next	"next"	“下一個”按鈕的文本
close	"close"	“關閉”按鈕的文本