jQuery / Colorbox - 创建一个单独的链接来打开颜色框？答案

【问题标题】：jQuery / Colorbox - create a separate link to open the colorbox?jQuery / Colorbox - 创建一个单独的链接来打开颜色框？
【发布时间】：2009-12-20 23:47:17
【问题描述】：

我正在尝试从其余颜色框图像之外的链接打开一个 jQuery 颜色框。所以，所有的例子都是这样的：

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

我必须把什么放在哪里才能做到这一点？所有的颜色框示例都只是展示了第一个代码块中的内容，我不是 jQuery 专家。

【问题讨论】：

标签： jquery colorbox

【解决方案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});
     });

});

【讨论】：

【解决方案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>

【讨论】：

您应该在 document.ready 函数中添加您的 colorbox 函数调用，而不是作为 onclick。

【解决方案3】：

此示例有效，但没有下一个和上一个选择： http://jsfiddle.net/pd6JN/8/

【讨论】：

【解决方案4】：

试试这个：

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

【讨论】：