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

Keith Palmer Jr. picture Keith Palmer Jr. · Dec 21, 2009 · Viewed 23.5k times · Source

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

Christopher Castiglione picture Christopher Castiglione · Apr 2, 2011

Here's a similar thing that worked for my project.

HTML

//I "display:none" the images gallery to hide them...
<div style="display:none;">
 <a href="image1.jpg" rel="example1">Grouped Photo 1</a>
 <a href="image2.jpg" rel="example2">Grouped Photo 2</a>
 <a href="image3.jpg" rel="example3">Grouped Photo 3</a>
</div>

//...then when I click on this JPG image the group of images (above) appear in a colorbox
<img src="circle1.jpg" width="147" height="149" alt="circle" class="circle1" />

Here's the JQUERY

$(document).ready(function(){

     //when i "click" on the image with a class of "circle1" it opens the "example1" group
     $('.circle1').click(function() {
        $("a[rel='example1']").colorbox({open:true});
     });

});