$(".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.
网友评论