jQuery / Colorbox - create a separate link to open the colorbox?

Question

I'm trying to open a jQuery Colorbox from a link outside the rest of the colorbox images. So, all of the examples look like this:

<a href="image1.png" rel="group1"><img src="thumb1.png" /></a>
<a href="image2.png" rel="group1"><img src="thumb2.png" /></a>
<script>$("a[rel='group1']").colorbox();</script>

OK, that's fine, but I also need to open that colorbox from a separate link:

<a href="?"> this link should also open the colorbox </a>

What do I have to put where to do that? All of the colorbox examples just show what's in the first code block, and I'm no jQuery expert.

Answer 1

You need to change selector to match the elements you want to use for the colorbox:

// will match all links:
$("a").colorbox();

// will match all links with the class colorbox:
$('a.colorbox').colorbox();

Update: If you need to specify a fixed HREF attribute, the docs indicate that you can do so like this:

$('a').colorbox({
   href: 'image.jpg' 
});

But I would guess it's OK to add the attribute using chaining first:

$('a').attr('href','image.jpg').colorbox();

Or even triggering other colorboxed links:

$('a.someclass').bind('click', function() {
    $('a[rel=group1]').eq(0).trigger('click');
});

Answer 2

Ah, figured it out! This works:

Change the first link to:

<a href="image1.png" rel="group1" id="something"><img src="thumb1.png" /></a>

Then, set up our extra link like this:

<a href="#" onclick="$('#something').colorbox({rel:\'post' . $post->ID . '\', open:true});">click here</a>