Fancybox画廊组

Question

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

我能将不同的资源组合在一起吗 我的意思是在同一个图库(或"组")中使用内联或视频的图像.如果有,任何人都知道如何？

这里有一个不起作用的例子:

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

先感谢您.

Answer 1

要在fancybox内对要导航的元素进行分组,需要rel在每个元素上设置属性.相同的rel值将告诉fancybox如果一个人打开它们,所有这些都将出现在导航中.

看到这个工作小提琴!

小组示例

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

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