Turn from: http://www.aspww.cn/View/11052701.aspx
Official website: http://colorpowered.com/colorbox/
Support photos, photo groups, slides, Ajax, inline and IFRAME frames. By using CSS to control skins, users can easily redefine their skins. You can reset the behavior of a colorbox JavaScript file without having to change it. Can rely on callback & Event-hooks to expand, do not need to modify the source code. Very friendly, do not need to modify the existing HTML, all the options are set through JS.
Introduced
The Colorbox () function uses a bunch of key/value objects and an optional callback function
Format: $ (' selector '). Colorbox ({Key:value}, callback);
Example: $ (' a.gallery '). Colorbox ({transition: ' fade ', speed:500});
Or an example: $ (' button '). Colorbox ({href: "thankyou.html"});
Set the value |
Default value |
Introduced |
Transition |
"Elastic" |
The transition effect can be "elastic", "Fade", or "none". |
Speed |
350 |
Sets the duration of the transition effect, milliseconds |
Href |
False |
example:$ (' H1 '). Colorbox ({href: "welcome.html"}) This is used to set the value of an anchor tag or an element that is not an anchor, such as an image or a button for a form, for example: |
Title |
False |
This can set a caption for Colorbox |
Rel |
False |
example:$ (' #example a '). Colorbox ({rel: ' group1 '}) This can set the set of elements to display based on the Rel property of the element, or it can overwrite an existing Rel property |
Width |
False |
Example: "100%", "500px", or 500 Set width, including borders and buttons |
Height |
False |
Example: "100%", "500px", or 500 Set height, including borders and buttons |
Innerwidth |
False |
Example: "50%", "500px", or 500 This can be set to a fixed internal size, including borders and buttons |
Innerheight |
False |
Example: "50%", "500px", or 500 This allows you to set a fixed inner height, including a border and a button. |
Initialwidth |
300 |
Set initialization width |
Initialheight |
100 |
Set initialization height |
MaxWidth |
False |
Example: "100%", "500px" Set the maximum width of content |
MaxHeight |
False |
Example: "100%", "500px" Set the maximum height of content |
Scalephotos |
True |
If True and MaxWidth, MaxHeight, Innerwidth, innerheight, width, or height are set, Colorbox scales the picture to use the border |
Scrolling |
True |
If it is false,colorbox, it will not set scroll bars for overflow elements |
Iframe |
False |
If true, the element is displayed in the IFRAME |
Inline |
False |
Example: $ ("#inline"). Colorbox ({inline:true, href: "#myForm"}); If the True,jquery selector can be used to select the element to display. For example: |
Html |
False |
Example: $.fn.colorbox ({html: ' This is the direct let you display HTML code, example Hello '}); |
Photo |
False |
If for True,colorbox only the elements are displayed according to the picture, preventing such connections like photo.php?pic=1 from being mistaken as Web pages |
Opacity |
0.85 |
Matte layer opacity value from 0-1 |
Open |
False |
If the True,colorbox will automatically open |
Preloading |
True |
If True,colorbox is automatically preloaded to display pictures |
Overlayclose |
True |
True click the mask layer to turn the Colorbox off |
Slideshow |
False |
True to automatically scroll the picture |
Slideshowspeed |
2500 |
Set time, milliseconds |
Slideshowauto |
True |
For Tuue, the slide will start automatically. |
Slideshowstart |
"Start Slideshow" |
Text that starts the automatic sliding button |
Slideshowstop |
"Stop Slideshow" |
Stop the text of the Auto Slide button |
Current |
' {current} ' of {total} ' |
Text content: The element ordinal that is now being displayed |
Previous |
"Previous" |
The text of the previous button |
Next |
"Next" |
The text of the Next button |
Close |
"Close" |
The text of the Close button |