轻量级，可定制的 lightbox 插件，适用于 jQuery 1.3和1.4
http://colorpowered.com/colorbox/
兼容: Firefox 2 & 3, Safari 3 & 4, Opera 9, Chrome, Internet Explorer 6, 7, 8.
colorbox 方法有一个 key/value 对象和一个 callback 选项。The colorbox method takes a key/value object and an optional callback.
格式: $('selector').colorbox({key:value, key:value, key:value}, callback);
示例: $('a#login').colorbox({transition:'fade', speed:500});
示例: $('a.gallery').colorbox();
示例: $('button').colorbox({href:"thankyou.html"});
直接打开，不需要把方法赋给元素。And it can be called directly, without assignment to an element
Example: $.fn.colorbox({href:"thankyou.html"});
ColorBox 可以接受自定于函数代替静态变量。ColorBox can accept a function in place of a static value:
$("a[rel='example']").colorbox({title: function(){
var url = $(this).attr('href');
return '<a href="'+url+'" target="_blank">Open In New Window</a>';
}});
演示页面的大量源码示例。Follow the source code on the demonstration pages for plenty of examples.
| Key | Default | Description |
|---|---|---|
| transition | "elastic" | 过渡效果，可以设置为elastic，fade 或 none。The transition type. Can be set to "elastic", "fade", or "none". |
| speed | 350 | 过渡效果的速度，单位毫秒。Sets the speed of the fade and elastic transitions, in milliseconds. |
| href | false | 这儿可以说锚点链接，或者像 image、button 这样非锚点元素上的链接。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 | 锚点的title 可以用作 ColorBox 的title。This can be used as an anchor title alternative for ColorBox. |
| rel | false | 在 ColorBox里这个可以看作一个锚点。用户可以靠它把任何元素组合中一起成一个相册。反之就不能组合中一起。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'}) 注：这里也可以设置为‘nofollow’来关掉编组。 The value can also be set to 'nofollow' to disable grouping. |
| 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. |
| 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. |
| iframe | false | If 'true' specifies that content should be displayed in an 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"}); |
| html | false | 可以使用 HTML 字符串代替牵涉的内容。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>'}); |
| 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') |
| opacity | 0.85 | 覆盖层的透明级别（0-1）.The overlay opacity level. Range: 0 to 1. |
| open | false | 如果是 true，lightbox 会自动打开而不需要任何动作。If true, the lightbox will automatically open with no input from the visitor. |
| 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. |
| overlayClose | true | 如果是true，点击背景覆盖层将关闭 ColorBox。If true, enables closing ColorBox by clicking on the background overlay. |
| slideshow | false | 如果是true，内容组或者相册将自动添加到幻灯片。If true, adds an automatic slideshow to a content group / gallery. |
| slideshowSpeed | 2500 | 设置幻灯片的速度，单位毫秒。Sets the speed of the slideshow, in milliseconds. |
| slideshowAuto | true | 如果是 true，幻灯片会自动开始播放。If true, the slideshow will automatically start to play. |
| 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. |
| 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. |
| 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://groups.google.com/group/colorbox/topics