官方网站：http://colorpowered.com/colorbox/
下载地址：http://colorpowered.com/colorbox/colorbox.zip
Colorbox是一个基于jQuery开发的轻量级，可定制的lightbox插件，也就是类似大家经常看到的那种遮罩层+提示框的样子。当然，你也可以让遮罩层不显示的。
A light-weight, customizable lightbox plugin for jQuery 1.3 and 1.4
特点:
1.支持图片，图片组，动画展示，ajax加载及展示框架内容；
2.轻量级：小于9KB的JS代码；
3.支持外部css重新定义模态框的外观；
4.可以直接覆盖ColorBox的行为设置而不用改ColorBox的JS文件；
5.可以预载背景图片和图片组中的图片；
6.用Jquery插件格式编写，可以使用链式操作 。
Tested In: Firefox 2 & 3, Safari 3 & 4, Opera 9, Chrome, Internet Explorer 6, 7, 8.
The colorbox method takes a key/value object and an optional callback.
Format: $('selector').colorbox({key:value, key:value, key:value}, callback);
Example: $('a#login').colorbox({transition:'fade', speed:500});
Example: $('a.gallery').colorbox();
Example: $('button').colorbox({href:"thankyou.html"});
And it can be called directly, without assignment to an element
Example: $.fn.colorbox({href:"thankyou.html"});
Colorbox will accept a function for any of it's parameters.
$("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" | 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 | 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. |
| 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'}) |
| 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 | 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 | The overlay opacity level. Range: 0 to 1. |
| open | false | 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 | If true, enables closing ColorBox by clicking on the background overlay. |
| slideshow | false | If true, adds an automatic slideshow to a content group / gallery. |
| slideshowSpeed | 2500 | Sets the speed of the slideshow, in milliseconds. |
| slideshowAuto | 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. |
Public methods and event hooks are provided for developers who want to extend or modify the plugin's functionality without having to rewrite the source files.
Example of using an event listener and public method to build a primitive slideshow:
$().bind('cbox_complete', function(){
setTimeout($.fn.colorbox.next, 1500);
});
$.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.
ColorBox triggers four different events during it's use. The event hooks fire at the same time as their corresponding callbacks (ie. cbox_complete & onComplete), but can be used to make a universal change to ColorBox, while callbacks are more for targeting changes on a specific instance of the modal.
'cbox_open' triggers when ColorBox is first opened, but after a few key variable assignments take place.
'cbox_load' triggers at the start of the phase where content type is determined and loaded.
'cbox_complete' triggers when the transition has completed and the newly loaded content has been revealed.
'cbox_cleanup' triggers as the close method begins.
'cbox_closed' triggers as the close method ends.
有话要说