$(".inline").colorbox({inline:true, width:"50%"});<p><a class='inline' href="#inline_content">Inline HTML</a></p><div style='display:none'><div id='inline_content' style='padding:10px; background:#fff;'><p><strong>This content comes from a hidden element on this page.</strong></p><p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p></div></div>
在上面的代碼中，每種使用方式都有說明谈撒，從代碼中可以看出匾南， colorbox 使用起來是非常的簡單蛆楞。
colorbox 還提供了很多的屬性、方法和事件橙数，可以讓我們更加方式的就用 colorbox灯帮，下面是一個從網(wǎng)上找的一個中文的參考列表：
KEY
設(shè)置的值
DEFAULT
默認(rèn)值
DESCRIPTION
介紹
transition
“elastic”
The transition type. Can be set to “elastic”, “fade”, or “none”.
過渡效果钟哥，可以是”elastic”, “fade”, or “none”.
speed
350
Sets the speed of the fade and elastic transitions, in milliseconds.
設(shè)置過渡效果的持續(xù)時間，毫秒
href
false
This can be used as an alternative anchor URL or to associate a URL for non-anchor elements such as images or form buttons. Example:
$(‘h1′).colorbox({href:”welcome.html”})
這個用來設(shè)置一個錨標(biāo)記的值或者一個不是錨的元素吁恍，例如圖像或者表單的按鈕冀瓦，例如：
title
false
This can be used as an anchor title alternative for ColorBox.
這可以為Colorbox設(shè)置一個標(biāo)題
rel
false
This can be used as an anchor rel alternative for ColorBox. This allows the user to group any combination of elements together for a gallery, or to override an existing rel so elements are not grouped together. Example:
$(‘#example a’).colorbox({rel:’group1′})
這個可以根據(jù)元素的rel屬性設(shè)置要顯示的元素集合翼闽，也可以覆蓋一個存在的rel屬性
width
false
Set a fixed total width. This includes borders and buttons. Example: “100%”, “500px”, or 500
設(shè)置寬度洲炊，包括邊框和按鈕
height
false
Set a fixed total height. This includes borders and buttons. Example: “100%”, “500px”, or 500
設(shè)置高度暂衡，包括邊框和按鈕
innerWidth
false
This is an alternative to ‘width’ used to set a fixed inner width. This excludes borders and buttons. Example: “50%”, “500px”, or 500
這個可以設(shè)定一個固定的內(nèi)大小狂巢，包括邊框和按鈕
innerHeight
false
This is an alternative to ‘height’ used to set a fixed inner height. This excludes borders and buttons. Example: “50%”, “500px”, or 500
這個可以設(shè)定一個固定的內(nèi)高度，包括邊框和按鈕
initialWidth
300
Set the initial width, prior to any content being loaded.
設(shè)置初始化寬度
initialHeight
100
Set the initial height, prior to any content being loaded.
設(shè)置初始化高度
maxWidth
false
Set a maximum width for loaded content. Example: “100%”, 500, “500px”
設(shè)置內(nèi)容的最大寬度
maxHeight
false
Set a maximum height for loaded content. Example: “100%”, 500, “500px”
設(shè)置內(nèi)容的最大高度
scalePhotos
true
If ‘true’ and if maxWidth, maxHeight, innerWidth, innerHeight, width, or height have been defined, ColorBox will scale photos to fit within the those values.
如果是true且maxWidth, maxHeight, innerWidth, innerHeight, width, 或者 height 被設(shè)置，Colorbox會縮放圖片以使用邊框
scrolling
true
If ‘false’ ColorBox will hide scrollbars for overflowing content. This could be used on conjunction with the resize method (see below) for a smoother transition if you are appending content to an already open instance of ColorBox.
如果是false,Colorbox不會為了溢出元素設(shè)置滾動條
iframe
false
If ‘true’ specifies that content should be displayed in an iFrame.
如果是true蹦疑，元素會在Iframe中顯示
inline
false
If ‘true’ a jQuery selector can be used to display content from the current page. Example:
$(“#inline”).colorbox({inline:true, href:”#myForm”});
如果是true,jquery選擇器可以用來選擇要顯示的元素萨驶。例如：
html
false
This allows an HTML string to be used directly instead of pulling content from another source (ajax, inline, or iframe). Example:
$.fn.colorbox({html:’<p>Hello</p>’});
這個是直接讓你顯示HTML代碼，例如：
photo
false
If true, this setting forces ColorBox to display a link as a photo. Use this when automatic photo detection fails (such as using a url like ‘photo.PHP’ instead of ‘photo.jpg’, ‘photo.jpg#1′, or ‘photo.jpg?pic=1′)
如果為true叁温，ColorBox只會把元素按照圖片顯示膝但，防止類似photo.php?pic=1這樣的連接被誤認(rèn)為是網(wǎng)頁
opacity
0.85
The overlay opacity level. Range: 0 to 1.
遮罩層不透明度 從0-1之間取值
open
false
If true, the lightbox will automatically open with no input from the visitor.
如果為true,ColorBox會自動開啟
preloading
true
Allows for preloading of ‘Next’ and ‘Previous’ content in a shared relation group (same values for the ‘rel’ attribute), after the current content has finished loading. Set to ‘false’ to disable.
如果為True,ColorBox會自動預(yù)載要顯示圖片
overlayClose
true
If true, enables closing ColorBox by clicking on the background overlay.
為true單擊遮罩層就可以把ColorBox關(guān)閉
slideshow
false
If true, adds an automatic slideshow to a content group / gallery.
為True跟束，會自動滾動圖片
slideshowSpeed
2500
Sets the speed of the slideshow, in milliseconds.
設(shè)置時間，毫秒
slideshowAuto
true
If true, the slideshow will automatically start to play.
為tuue灭贷，滑動會自動開始
slideshowStart
“start slideshow”
Text for the slideshow start button.
開始自動滑動按鈕的文本
slideshowStop
“stop slideshow”
Text for the slideshow stop button
停止自動滑動按鈕的文本
current
“{current} of {total}”
Text format for the content group / gallery count. {current} and {total} are detected and replaced with actual numbers while ColorBox runs.
文本內(nèi)容：現(xiàn)在正在顯示的元素序號甚疟，格式”{現(xiàn)在} of {總計}”
previous
“previous”
Text for the previous button in a shared relation group (same values for ‘rel’ attribute).
“上一個”按鈕的文本
next
“next”
Text for the next button in a shared relation group (same values for ‘rel’ attribute).
“下一個”按鈕的文本
close
“close”
Text for the close button. The ‘Esc’ key will also close ColorBox.
“關(guān)閉”按鈕的文本
onOpen
false
Callback that fires right before ColorBox begins to open.
下面幾個都是在XXX時候要執(zhí)行的函數(shù)览妖，不用多說黄痪，一看就會
onLoad
false
Callback that fires right before attempting to load the target content.
onComplete
false
Callback that fires right after loaded content is displayed.
onCleanup
false
Callback that fires at the start of the close process.
onClosed
false
Callback that fires once ColorBox is closed.
上面列表轉(zhuǎn)載自：http://hi.baidu.com/234000/
（原創(chuàng)）關(guān)于一款優(yōu)秀的Jquery插件-Colorbox的官方用法翻譯
2010年01月17日 星期日 11:13
原創(chuàng)文章盔然，如果您需要轉(zhuǎn)載愈案，請您注明來源來自 http://hi.baidu.com/234000/ 謝謝站绪！
Colorbox:http://colorpowered.com/colorbox/
Colorbox是一個能在你的瀏覽器窗口中創(chuàng)建一個模態(tài)對話框的程序丽柿。甫题。。也就是類似大家經(jīng)趁舫粒看到的那種遮罩層+提示框的樣子盟迟。當(dāng)然潦闲，你也可以讓遮罩層不顯示的歉闰。
在以前卓起，用于Jquery的類似插件應(yīng)該毫無疑問是Thickbox既绩。不過前一陣子去Jquery Plugins看的時候發(fā)現(xiàn)Thickbox已經(jīng)停止了更新还惠，且Jquery官方推薦了幾個Thickbox的替代品蚕键，我最終選擇了Colorbox，因為它十分的簡單易用和強大笆怠。
以下是Colorbox的官方介紹翻譯蹬刷，希望對大家有所幫助频丘。
——————————————————————————————————————————
Colorbox
Jquery的一個輕量的搂漠，可自定義的 lightbox 插件桐汤。
為什么選擇Colorbox?
Supports photos, photo groups, slideshow, ajax, inline, and iframed content.
支持圖片，圖片組员萍，圖片滑動觀看充活，ajax,行內(nèi)元素和iframe內(nèi)容
· Lightweight: less than 9KB of javascript.
· 十分輕量蜡娶，只有不到9KB大小
· Appearance is controlled through CSS so users can restyle the box.
· 外觀可以通過CSS進行控制
· Behavior settings can be over-written without altering the ColorBox javascript file.
· 可以直接覆蓋ColorBox的行為設(shè)置而不用改ColorBox的js文件
· Can be extended with callbacks & event-hooks without altering the source files.
· 可以直接加上回調(diào)函數(shù)和事件鉤子而不用更改它的源代碼
· Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
· 非入侵式操作窖张，選項可以在JS中設(shè)置而不用更改HTML
· Preloads background images and can preload upcoming images in a photo group.
· 可以預(yù)載背景圖片和圖片組中的圖片
· Written in jQuery plugin format and can be chained with other jQuery commands.
· 用Jquery插件格式編寫宿接，可以使用鏈?zhǔn)讲僮?br>
· Generates W3C valid XHTML and adds no JS global variables & passes JSLint.
· 語法通過W3C和XHTML認(rèn)證，沒有添加JS的全局變量
· Released under the MIT License.
· 在 MIT License下發(fā)布
Tested In: Firefox 2 & 3, Safari 3 & 4, Opera 9, Chrome, Internet Explorer 6, 7, 8.
在Firefox 2 & 3, Safari 3 & 4, Opera 9, Chrome, Internet Explorer 6, 7, 8.下運行良好
Instructions
介紹
The colorbox() function takes a key/value object and an optional callback.
colorbox()函數(shù)使用一堆key/value對象和一個可選的callback函數(shù)
Format: $('selector').colorbox({key:value}, callback);
格式走诞？：$('selector').colorbox({key:value}, callback);
Example: $('a.gallery').colorbox({transition:'fade', speed:500});
例子： $('a.gallery').colorbox({transition:'fade', speed:500});
Example: $('button').colorbox({href:"thankyou.html"});
還是例子：$('button').colorbox({href:"thankyou.html"});
Follow the source code on the demonstration pages for plenty of examples.
在Colorbox的演示頁面還有很多例子
Key
設(shè)置的值
Default
默認(rèn)值
Description
介紹
transition
"elastic"
The transition type. Can be set to "elastic", "fade", or "none".
過渡效果蚣旱，可以是"elastic", "fade", or "none".
speed
350
Sets the speed of the fade and elastic transitions, in milliseconds.
設(shè)置過渡效果的持續(xù)時間塞绿，毫秒
href
false
This can be used as an alternative anchor URL or to associate a URL for non-anchor elements such as images or form buttons. Example:$('h1').colorbox({href:"welcome.html"})
這個用來設(shè)置一個錨標(biāo)記的值或者一個不是錨的元素恤批，例如圖像或者表單的按鈕喜庞，例如：
title
false
This can be used as an anchor title alternative for ColorBox.
這可以為Colorbox設(shè)置一個標(biāo)題
rel
false
This can be used as an anchor rel alternative for ColorBox. This allows the user to group any combination of elements together for a gallery, or to override an existing rel so elements are not grouped together. Example:$('#example a').colorbox({rel:'group1'})
這個可以根據(jù)元素的rel屬性設(shè)置要顯示的元素集合延都，也可以覆蓋一個存在的rel屬性
width
false
Set a fixed total width. This includes borders and buttons. Example: "100%", "500px", or 500
設(shè)置寬度，包括邊框和按鈕
height
false
Set a fixed total height. This includes borders and buttons. Example: "100%", "500px", or 500
設(shè)置高度，包括邊框和按鈕
innerWidth
false
This is an alternative to 'width' used to set a fixed inner width. This excludes borders and buttons. Example: "50%", "500px", or 500
這個可以設(shè)定一個固定的內(nèi)大小嫉你，包括邊框和按鈕
innerHeight
false
This is an alternative to 'height' used to set a fixed inner height. This excludes borders and buttons. Example: "50%", "500px", or 500
這個可以設(shè)定一個固定的內(nèi)高度幽污，包括邊框和按鈕
initialWidth
300
Set the initial width, prior to any content being loaded.
設(shè)置初始化寬度
initialHeight
100
Set the initial height, prior to any content being loaded.
設(shè)置初始化高度
maxWidth
false
Set a maximum width for loaded content. Example: "100%", 500, "500px"
設(shè)置內(nèi)容的最大寬度
maxHeight
false
Set a maximum height for loaded content. Example: "100%", 500, "500px"
設(shè)置內(nèi)容的最大高度
scalePhotos
true
If 'true' and if maxWidth, maxHeight, innerWidth, innerHeight, width, or height have been defined, ColorBox will scale photos to fit within the those values.
如果是true且maxWidth, maxHeight, innerWidth, innerHeight, width, 或者 height 被設(shè)置距误，Colorbox會縮放圖片以使用邊框
scrolling
true
If 'false' ColorBox will hide scrollbars for overflowing content. This could be used on conjunction with the resize method (see below) for a smoother transition if you are appending content to an already open instance of ColorBox.
如果是false,Colorbox不會為了溢出元素設(shè)置滾動條
iframe
false
If 'true' specifies that content should be displayed in an iFrame.
如果是true准潭，元素會在Iframe中顯示
inline
false
If 'true' a jQuery selector can be used to display content from the current page. Example: $("#inline").colorbox({inline:true, href:"#myForm"});
如果是true,jQuery選擇器可以用來選擇要顯示的元素刑然。例如：
html
false
This allows an HTML string to be used directly instead of pulling content from another source (ajax, inline, or iframe). Example: $.fn.colorbox({html:'<p>Hello</p>'});
這個是直接讓你顯示HTML代碼暇务，例如：
photo
false
If true, this setting forces ColorBox to display a link as a photo. Use this when automatic photo detection fails (such as using a url like 'photo.php' instead of 'photo.jpg', 'photo.jpg#1', or 'photo.jpg?pic=1')
如果為true，ColorBox只會把元素按照圖片顯示挡逼，防止類似photo.php?pic=1這樣的連接被誤認(rèn)為是網(wǎng)頁
opacity
0.85
The overlay opacity level. Range: 0 to 1.
遮罩層不透明度 從0-1之間取值
open
false
If true, the lightbox will automatically open with no input from the visitor.
如果為true,ColorBox會自動開啟
preloading
true
Allows for preloading of 'Next' and 'Previous' content in a shared relation group (same values for the 'rel' attribute), after the current content has finished loading. Set to 'false' to disable.
如果為True,ColorBox會自動預(yù)載要顯示圖片
overlayClose
true
If true, enables closing ColorBox by clicking on the background overlay.
為true單擊遮罩層就可以把ColorBox關(guān)閉
slideshow
false
If true, adds an automatic slideshow to a content group / gallery.
為True家坎，會自動滾動圖片
slideshowSpeed
2500
Sets the speed of the slideshow, in milliseconds.
設(shè)置時間乘盖，毫秒
slideshowAuto
true
If true, the slideshow will automatically start to play.
為tuue憔涉，滑動會自動開始
slideshowStart
"start slideshow"
Text for the slideshow start button.
開始自動滑動按鈕的文本
slideshowStop
"stop slideshow"
Text for the slideshow stop button
停止自動滑動按鈕的文本
current
"{current} of {total}"
Text format for the content group / gallery count. {current} and {total} are detected and replaced with actual numbers while ColorBox runs.
文本內(nèi)容：現(xiàn)在正在顯示的元素序號兜叨，格式"{現(xiàn)在} of {總計}"
previous
"previous"
Text for the previous button in a shared relation group (same values for 'rel' attribute).
“上一個”按鈕的文本
next
"next"
Text for the next button in a shared relation group (same values for 'rel' attribute).
“下一個”按鈕的文本
close
"close"
Text for the close button. The 'Esc' key will also close ColorBox.
“關(guān)閉”按鈕的文本
onOpen
false
Callback that fires right before ColorBox begins to open.
下面幾個都是在XXX時候要執(zhí)行的函數(shù)国旷，不用多說跪但，一看就會
onLoad
false
Callback that fires right before attempting to load the target content.
onComplete
false
Callback that fires right after loaded content is displayed.
onCleanup
false
Callback that fires at the start of the close process.
onClosed
false
Callback that fires once ColorBox is closed.
下面幾個方法由于時間問題沒能來得及翻譯，有空一定為大家補上
Public Methods
$.fn.colorbox()This method allows you to call ColorBox without having to assign it to an element. Returns 'this' (document). Example: $.fn.colorbox({href:'login.php', open:true});
$.fn.colorbox.next() & $.fn.colorbox.prev()These methods moves to the next and previous items in a gallery and are the same as pressing the 'next' or 'previous' buttons. Returns nothing.
$.fn.colorbox.close()This method initiates the close sequence, which does not immediately complete. The lightbox will be completely closed only when the 'cbox_closed' event is fired. Returns nothing.
$.fn.colorbox.element()This method is used to fetch the current HTML element that ColorBox is associated with. Returns a DOM element. Example: var that = $.fn.colorbox.element();
$.fn.colorbox.resize()This allows ColorBox to auto-resize it's height if it's content is altered. This must be called manually after the content has been updated. Set 'scrollbars' to false to prevent them from being displayed during the resize animation.
$.fn.colorbox.init()This runs silently when the DOM is first loaded and is used to initialize the lightbox (adds necessary HTML to the DOM, preloads the interface graphics, initializes variables, etc). If ColorBox were completely removed from the DOM, to load in a new stylesheet for example, this would be needed to re-initialize it.
