jQuery Fancybox 画廊组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10676588/
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
Fancybox gallery groups
提问by Andrey_
I'm using fancybox http://fancyapps.com/fancybox/, and my question is:
我正在使用fancybox http://fancyapps.com/fancybox/，我的问题是：
Could i group different resources together? I mean images with inline or video in the same gallery (or 'group'). If yes, anyone knows how?
我可以将不同的资源组合在一起吗？我的意思是在同一个画廊（或“组”）中带有内嵌或视频的图像。如果是的话，有人知道怎么做吗？
Here an example that doesn't work:
这是一个不起作用的例子：
<a class="fancyinline" data-fancybox-group="testgroup" href="#cont3">Test</a>
<div class="fancyhidden" id="cont3">Test Content</div>
<a class="fancyimage" data-fancybox-group="testgroup" href="test.jpg" >
<img src="test-th.jpg" alt="" />
</a>
fancyinline and fancyimage aren't grouped together, but I need so. Of course I need different parameters for inlines and images...
花式内线和花式图像没有组合在一起，但我需要这样。当然，我需要内联和图像的不同参数......
Thank you in advance.
先感谢您。
回答by Zuul
To group elements for navigation inside the fancybox, you need to set the relattribute on each on them.
The same relvalue will tell fancybox that all of them are to be present to navigation if one gets open.
要对fancybox 内的导航元素进行分组，您需要rel在每个元素上设置属性。相同的rel值会告诉fancybox，如果打开它们，所有这些都将出现在导航中。
See this working Fiddle!
看到这个工作小提琴！
GROUP EXAMPLE
组例
HTML
HTML
<a rel="example_group" title="Custom title" href="full_path_to_image.jpg">
<img alt="" src="path_to_image_thumbs.jpg">
</a>
<a rel="example_group" title="Custom title" href="full_path_to_image.jpg">
<img alt="" src="path_to_image_thumbs.jpg">
</a>
JQUERY
查询
$("a[rel=example_group]").fancybox();
GROUP EXAMPLE ONE VISIBLE, REST HIDDEN
组示例一可见，休息隐藏
HTML
HTML
<a rel="group2" title="Custom title" href="full_path_to_image.jpg">
<img alt="" src="path_to_image_thumbs.jpg">
</a>
<a rel="group2" title="" href="full_path_to_img.jpg" style="display:none;"></a>
<a rel="group2" title="" href="full_path_to_img.jpg" style="display:none;"></a>
<a rel="group2" title="" href="full_path_to_img.jpg" style="display:none;"></a>
JQUERY
查询
$("a[rel=group2]").fancybox();
回答by ronux
I do it like this
我这样做
$("#fancybox-manual-c").click(function() {
$.fancybox.open([
{
href : '1_b.jpg',
title : 'My title'
}, {
href : '2_b.jpg',
title : '2nd title'
}, {
href : '3_b.jpg'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
