Property | 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.
$("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.
$("a.gallery").colorbox({rel:"group1"});
Note: The value can also be set to 'nofollow' to disable grouping. |
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. |
opacity | 0.85 | The overlay opacity level. Range: 0 to 1. |
open | false | If true, ColorBox will immediately open. |
returnFocus | true | If true, focus will be returned when ColorBox exits to the element it was launched from. |
fastIframe | true | If false, the loading graphic removal and onComplete event will be delayed until iframe's content has completely loaded. |
preloading | true | Allows for preloading of 'Next' and 'Previous' content in a group, after the current content has finished loading. Set to false to disable. |
overlayClose | true | If false, disables closing ColorBox by clicking on the background overlay. |
escKey | true | If false, will disable closing colorbox on 'esc' key press. |
arrowKey | true | If false, will disable the left and right arrow keys from navigating between the items in a group. |
loop | true | If false, will disable the ability to loop back to the beginning of the group when on the last element. |
current | "image {current} of {total}" | Text or HTML for the group counter while viewing a group. {current} and {total} are detected and replaced with actual numbers while ColorBox runs. |
previous | "previous" | Text or HTML for the previous button while viewing a group. |
next | "next" | Text or HTML for the next button while viewing a group. |
close | "close" | Text or HTML for the close button. The 'esc' key will also close ColorBox. |
data | false | For submitting GET or POST values through an ajax request. The data property will act exactly like jQuery's .load() data argument, as ColorBox uses .load() for ajax handling. |
Content Type | | |
---|
iframe | false | If true, specifies that content should be displayed in an iFrame. |
inline | false | If true, content from the current document can be displayed by passing the href property a jQuery selector, or jQuery object.
// Using a selector:
$("#inline").colorbox({inline:true, href:"#myForm"});
// Using a jQuery object:
var $form = $("#myForm");
$("#inline").colorbox({inline:true, href:$form});
|
html | false | For displaying a string of HTML or text.
$.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') |
ajax | | This property isn't actually used as ColorBox assumes all hrefs should be treated as either ajax or photos, unless one of the other content types were specified. |
Dimensions | | |
---|
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" |
Slideshow | | |
---|
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 |
Positioning | | |
---|
fixed | false | If true, ColorBox will be displayed in a fixed position within the visitor's viewport. This is unlike the default absolute positioning relative to the document. |
top | false | Accepts a pixel or percent value (50, "50px", "10%"). Controls ColorBox's vertical positioning instead of using the default position of being centered in the viewport. |
bottom | false | Accepts a pixel or percent value (50, "50px", "10%"). Controls ColorBox's vertical positioning instead of using the default position of being centered in the viewport. |
left | false | Accepts a pixel or percent value (50, "50px", "10%"). Controls ColorBox's horizontal positioning instead of using the default position of being centered in the viewport. |
right | false | Accepts a pixel or percent value (50, "50px", "10%"). Controls ColorBox's horizontal positioning instead of using the default position of being centered in the viewport. |
Callbacks | | |
---|
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. |