Fancybox gallery groups

Question

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.

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