JQuery / Colorbox - создать отдельную ссылку, чтобы открыть Colorbox?

Question

Я пытаюсь открыть jQuery Colorbox по ссылке за пределами остальных изображений colorbox. Итак, все примеры выглядят так:

<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>

ОК, все в порядке, но мне также нужно открыть этот цветовой ящик из отдельной ссылки:

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

Что я должен поставить, где это сделать? Все примеры colorbox просто показывают, что находится в первом блоке кода, и я не эксперт по jQuery.

Answer 1

Вот похожая вещь, которая работала для моего проекта.

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" />

Вот 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});
     });

});

Answer 2

Ах, разобрался! Это работает:

Изменить первую ссылку на:

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

Затем настройте нашу дополнительную ссылку следующим образом:

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

Answer 3

Этот пример работает, но без следующего и предыдущего выбора: http://jsfiddle.net/pd6JN/8/

Answer 4

Попробуйте это:

$(".link-to-click").click(function() {
   $("a.colorbox-link").colorbox({open:true, rel:'colorbox-class-group'});
});