Fancybox gallery groups

问题

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 and fancyimage aren't grouped together, but I need so. Of course I need different parameters for inlines and images...

Thank you in advance.

回答1:

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.

See this working Fiddle!

GROUP EXAMPLE

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

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

回答2:

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

来源：https://stackoverflow.com/questions/10676588/fancybox-gallery-groups