jquery Pop-up widget Colorbox

jquery Pop-up widget Colorbox

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: ' Hello '}); This is the direct let you display HTML code, example
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