galleria Fancybox gruppi

Question

sto usando fancybox http://fancyapps.com/fancybox/, e la mia domanda è:

Potrei gruppo risorse diverse insieme? Intendo immagini con inline o video nella stessa galleria (o "gruppo"). Se sì, qualcuno sa come?

Ecco un esempio che non funziona:

<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 e fancyimage non sono raggruppati insieme, ma ho bisogno di così. Naturalmente ho bisogno di parametri diversi per inline e immagini ...

Grazie in anticipo.

Answer 1

Per raggruppare gli elementi per la navigazione all'interno di fancybox, è necessario impostare l'attributo su ciascuno di essi. Lo stesso valore rel indicherà a fancybox che tutti devono essere presenti alla navigazione se uno si apre.

Vedere questo working Fiddle!

GRUPPO ESEMPIO

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

---

GRUPPO ESEMPIO quello visibile, RESTO 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(); 

Answer 2

lo faccio come questo

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