$(".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，下面是一個從網上找的一個中文的參考列表：
KEY
設置的值
DEFAULT
默認值
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.
設置過渡效果的持續時間，毫秒
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”})
這個用來設置一個錨標記的值或者一個不是錨的元素，例如圖像或者表單的按鈕，例如：
title
false
This can be used as an anchor title alternative for ColorBox.
這可以為Colorbox設置一個標題
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′})
這個可以根據元素的rel屬性設置要顯示的元素集合，也可以覆蓋一個存在的rel屬性
width
false
Set a fixed total width. This includes borders and buttons. Example: “100%”, “500px”, or 500
設置寬度，包括邊框和按鈕
height
false
Set a fixed total height. This includes borders and buttons. Example: “100%”, “500px”, or 500
設置高度，包括邊框和按鈕
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
這個可以設定一個固定的內大小，包括邊框和按鈕
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
這個可以設定一個固定的內高度，包括邊框和按鈕
initialWidth
300
Set the initial width, prior to any content being loaded.
設置初始化寬度
initialHeight
100
Set the initial height, prior to any content being loaded.
設置初始化高度
maxWidth
false
Set a maximum width for loaded content. Example: “100%”, 500, “500px”
設置內容的最大寬度
maxHeight
false
Set a maximum height for loaded content. Example: “100%”, 500, “500px”
設置內容的最大高度
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 被設置，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不會為了溢出元素設置滾動條
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這樣的連接被誤認為是網頁
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會自動預載要顯示圖片
overlayClose
true
If true, enables closing ColorBox by clicking on the background overlay.
為true單擊遮罩層就可以把ColorBox關閉
slideshow
false
If true, adds an automatic slideshow to a content group / gallery.
為True，會自動滾動圖片
slideshowSpeed
2500
Sets the speed of the slideshow, in milliseconds.
設置時間，毫秒
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.
文本內容：現在正在顯示的元素序號，格式”{現在} 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.
“關閉”按鈕的文本
onOpen
false
Callback that fires right before ColorBox begins to open.
下面幾個都是在XXX時候要執行的函數，不用多說，一看就會
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.
上面列表轉載自：http://hi.baidu.com/234000/
（原創）關于一款優秀的Jquery插件-Colorbox的官方用法翻譯
2010年01月17日 星期日 11:13
原創文章，如果您需要轉載，請您注明來源來自 http://hi.baidu.com/234000/ 謝謝！
Colorbox:http://colorpowered.com/colorbox/
Colorbox是一個能在你的瀏覽器窗口中創建一個模態對話框的程序。。。也就是類似大家經常看到的那種遮罩層+提示框的樣子。當然，你也可以讓遮罩層不顯示的。
在以前，用于Jquery的類似插件應該毫無疑問是Thickbox。不過前一陣子去Jquery Plugins看的時候發現Thickbox已經停止了更新，且Jquery官方推薦了幾個Thickbox的替代品，我最終選擇了Colorbox，因為它十分的簡單易用和強大。
以下是Colorbox的官方介紹翻譯，希望對大家有所幫助。
——————————————————————————————————————————
Colorbox
Jquery的一個輕量的，可自定義的 lightbox 插件。
為什么選擇Colorbox?
Supports photos, photo groups, slideshow, ajax, inline, and iframed content.
支持圖片，圖片組，圖片滑動觀看，ajax,行內元素和iframe內容
· 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的行為設置而不用改ColorBox的js文件
· Can be extended with callbacks & event-hooks without altering the source files.
· 可以直接加上回調函數和事件鉤子而不用更改它的源代碼
· Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
· 非入侵式操作，選項可以在JS中設置而不用更改HTML
· Preloads background images and can preload upcoming images in a photo group.
· 可以預載背景圖片和圖片組中的圖片
· Written in jQuery plugin format and can be chained with other jQuery commands.
· 用Jquery插件格式編寫，可以使用鏈式操作
· Generates W3C valid XHTML and adds no JS global variables & passes JSLint.
· 語法通過W3C和XHTML認證，沒有添加JS的全局變量
· Released under the MIT License.
· 在 MIT License下發布
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()函數使用一堆key/value對象和一個可選的callback函數
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
設置的值
Default
默認值
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.
設置過渡效果的持續時間，毫秒
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"})
這個用來設置一個錨標記的值或者一個不是錨的元素，例如圖像或者表單的按鈕，例如：
title
false
This can be used as an anchor title alternative for ColorBox.
這可以為Colorbox設置一個標題
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'})
這個可以根據元素的rel屬性設置要顯示的元素集合，也可以覆蓋一個存在的rel屬性
width
false
Set a fixed total width. This includes borders and buttons. Example: "100%", "500px", or 500
設置寬度，包括邊框和按鈕
height
false
Set a fixed total height. This includes borders and buttons. Example: "100%", "500px", or 500
設置高度，包括邊框和按鈕
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
這個可以設定一個固定的內大小，包括邊框和按鈕
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
這個可以設定一個固定的內高度，包括邊框和按鈕
initialWidth
300
Set the initial width, prior to any content being loaded.
設置初始化寬度
initialHeight
100
Set the initial height, prior to any content being loaded.
設置初始化高度
maxWidth
false
Set a maximum width for loaded content. Example: "100%", 500, "500px"
設置內容的最大寬度
maxHeight
false
Set a maximum height for loaded content. Example: "100%", 500, "500px"
設置內容的最大高度
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 被設置，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不會為了溢出元素設置滾動條
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這樣的連接被誤認為是網頁
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會自動預載要顯示圖片
overlayClose
true
If true, enables closing ColorBox by clicking on the background overlay.
為true單擊遮罩層就可以把ColorBox關閉
slideshow
false
If true, adds an automatic slideshow to a content group / gallery.
為True，會自動滾動圖片
slideshowSpeed
2500
Sets the speed of the slideshow, in milliseconds.
設置時間，毫秒
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.
文本內容：現在正在顯示的元素序號，格式"{現在} 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.
“關閉”按鈕的文本
onOpen
false
Callback that fires right before ColorBox begins to open.
下面幾個都是在XXX時候要執行的函數，不用多說，一看就會
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.
