You are here: Home » Plugins » jQuery Colorbox » Opening links in the Colorbox

Opening links in the Colorbox

Since Version 3.8, the jQuery Colorbox plugin allows you to open linked contents inside a Colorbox.
Contents are loaded in an iFrame, so if the website you are linking to prevents that, a blank page is displayed. For example, Google.com prevents loading the page in an iFrame.
For more information, click on the Wikipedia link at the bottom.

Other than that, it’s very easy to use:

When inserting a link into a post, page or website, add the class “colorbox-link” to the link.

First, you’ll have to set the visual editor to show the “Kitchen sink”:

Show/Hide Kitchen Sink

Show/Hide Kitchen Sink

After that, select the style “colorbox-link” from the dropdown:

Style dropdown

Style dropdown

In order to use the Colorbox for links, you’ll have to set the width and height in the colorbox settings:

Colorbox settings

Colorbox settings

Grouping links

Since jQuery Colorbox 4.4.1, links can be grouped by adding a numerical ID to the CSS class. (e.g. “colorbox-link-1″, “colorbox-link-2″)
Every link on a page with the same ID will be grouped into a slideshow.

Demo:

Single Links:

link to Wikipedia

link to a youtube video

Grouped links:

slideshow link 1

slideshow link 2