Geek asks and answers

Fancybox Gallery Groups

I am using fancybox http://fancyapps.com/fancybox/ and my question is:

Can I combine different resources? I mean images with embedded or video in one gallery (or group). If so, does anyone know how?

Here is an example that does not 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 are not grouped together, but I need it. Of course, I need different options for strings and images ...

Thanks in advance.

+5
source share
2 answers

To group elements for navigation inside fancybox, you need to set an attribute relfor each of them. The same value relwill tell fancybox that they should all be present in the navigation if you open.

!

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

:

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

More articles:


All Articles