Fancybox画廊组 [英] Fancybox gallery groups

问题描述

我正在使用fancybox http://fancyapps.com/fancybox/，我的问题是:

I'm using fancybox http://fancyapps.com/fancybox/, and my question is:

我可以将不同的资源归为一组吗?我的意思是在同一图库(或组")中包含内联或视频的图像.如果是的话，有人知道吗?

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和fancyimage没有组合在一起，但是我需要这样. 当然，对于内联和图像，我需要使用不同的参数...

fancyinline and fancyimage aren't grouped together, but I need so. Of course I need different parameters for inlines and images...

谢谢.

推荐答案

要在花式框内对元素进行分组以便导航，您需要在每个元素上设置rel属性. 相同的rel值将告诉fancybox如果其中一个打开，则所有这些元素都将出现在导航中.

To group elements for navigation inside the fancybox, you need to set the rel attribute on each on them. The same rel value will tell fancybox that all of them are to be present to navigation if one gets open.

请参见正在工作的小提琴！

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();

---

组示例一个可见的，隐藏的

HTML

---

GROUP EXAMPLE ONE VISIBLE, REST HIDDEN

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();

这篇关于Fancybox画廊组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！