jquery Pop-up widget Colorbox

Source: Internet
Author: User
Tags set time
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.