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如果一个人打开，所有这些值都将出现在导航中。

请参阅此working Fiddle!

组示例

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

Answer 2

我这样做

$("#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
                    }
                }
            });
        });