Fancybox gallery groups

fancybox, jquery

Solution

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

Problem

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.

Original source