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

8 thoughts on “Opening links in the Colorbox”

  1. I’m using 3.8, but when I try to open a page this way, the only thing that happens is a very small box appearing with nothing in it. The box is only about 30px heigh and 15px wide. I tried to open a regular html page and a youtube page.

    1. Hi Jack,

      in 3.8, you have to set the maximum width and maximum height of the colorbox in the settings if you want to open links.

      Cheers,
      Arne

  2. Hi

    Can you pls paste the code for me here. I want to open an a youtube video from an image link ??

    Thanks

    1. Hi Ben,
      you just have to insert a link using the WordPress visual editor, add the “colorbox-link” class and set the maximum height and width in the colorbox settings.
      Cheers,
      Arne

  3. Arne

    Thanks for your promptness to help. It’s been a pleasure and it’s now working perfect.

    Thanks man
    Ben

  4. hEY,

    This seems like a great plugin. I want a page to appear like this. I have a share button on my menu. I put ‘colorbox-link’ as the css-classes but it doesn’t open in a window. I haven’t made any changes to the default settings of your plugin except for activating it for pictures too.

    WordPress 3.1 with pageliness free theme

    1. Hi,
      sounds like you did everything right…
      I didn’t find the link on the page you linked to, are you still using the plugin?
      Cheers,
      Arne

Comments are closed.