jquery - 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>

查询

$("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>

查询

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