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

Demo:

link to Wikipedia

link to a youtube video

8 Comments

  1. jack
    Posted 2.Jan 2011 at 22:41 | Permalink

    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.

    • arne
      Posted 2.Jan 2011 at 22:46 | Permalink

      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. Ben
    Posted 4.Jan 2011 at 10:42 | Permalink

    Hi

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

    Thanks

    • arne
      Posted 4.Jan 2011 at 19:44 | Permalink

      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. Ben
    Posted 4.Jan 2011 at 12:29 | Permalink

    I used link to Google from your example to see if it works on my website but all what it shows is a distorted blank colorbox. The next and previous link is also displaced. See the screen below.

    http://www.infografixlab.com/deploy/screencb.jpg

    Can you pls help or email me?

    Ben

  4. Ben
    Posted 6.Jan 2011 at 12:35 | Permalink

    Arne

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

    Thanks man
    Ben

  5. yodA
    Posted 11.Mar 2011 at 06:56 | Permalink

    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

    • arne
      Posted 2.Apr 2011 at 22:06 | Permalink

      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