Fancybox Galerie Gruppen

Question

Ich verwende fancybox http://fancyapps.com/fancybox/, und meine Frage ist:

konnte ich zusammen verschiedene Ressourcen Gruppe? Ich meine Bilder mit Inline oder Video in derselben Galerie (oder "Gruppe"). Wenn ja, weiß jemand wie?

Hier ist ein Beispiel, das nicht funktioniert:

<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 und fancyimage sind nicht zusammen gruppiert, aber ich brauche so. Natürlich brauche ich andere Parameter für Inlines und Bilder ...

Vielen Dank im Voraus.

Answer 1

Um Elemente für die Navigation innerhalb der Fancybox zu gruppieren, müssen Sie das Attribut rel auf jedem Element setzen. Der gleiche rel Wert wird fancybox sagen, dass alle von ihnen zur Navigation vorhanden sein sollen, wenn man geöffnet wird.

Sehen Sie diese working Fiddle!

GROUP Beispiel

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 Beispiel Sichtbares, 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(); 

Answer 2

Ich mache es wie dieses

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