jQuery / Colorbox - 创建一个单独的链接来打开颜色框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1937520/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery / Colorbox - create a separate link to open the colorbox?
提问by Keith Palmer Jr.
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:
我正在尝试从其余颜色框图像之外的链接打开一个 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>
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.
我必须把什么放在哪里才能做到这一点？所有的颜色框示例只显示第一个代码块中的内容，我不是 jQuery 专家。
回答by Christopher Castiglione
Here's a similar thing that worked for my project.
这是适用于我的项目的类似事情。
HTML
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
这是 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});
});
});
回答by Keith Palmer Jr.
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>
回答by Michael
This example works, but without next and previous selections: http://jsfiddle.net/pd6JN/8/
这个例子有效，但没有下一个和上一个选择：http: //jsfiddle.net/pd6JN/8/
回答by Jry
Try this:
尝试这个：
$(".link-to-click").click(function() {
$("a.colorbox-link").colorbox({open:true, rel:'colorbox-class-group'});
});
