jQuery Fancybox mehrere Album

Question

Ich versuche, die FancyBox zu verwenden, um ein Album mit einem einzigen Klick zu erstellen, das heißt, um mir "N" von Bildern zu öffnen, die Sie sehen, dass ich auf jedes Bild klicke, weiß nicht wie dies tut, wenn über JS, Internet-Suche und viele Optionen, aber noch nichts erreicht ...

ich will nicht ein Bild mit einem einzigen Klick öffnen, aber offen mehr einem Album

hier ist mein Code zu sehen :

<aside class="row"> 
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> 
    <article class="album"> 
     <h3>Galería</h3> 
     <a class="fancybox" rel="gallery1" href="http://farm2.staticflickr.com/1617/24108587812_6c9825d0da_b.jpg"> 
      <figure> 
       <img src="assets/own/images/galeria/test_pic_gallery.png" alt="" /> 
      </figure> 
     </a> 
    </article> 
</div> 
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> 
    <article class="album"> 
     <h3>Galería</h3> 
     <a class="fancybox" rel="gallery2" href="http://farm2.staticflickr.com/1617/24108587812_6c9825d0da_b.jpg"> 
      <figure> 
       <img src="assets/own/images/galeria/test_pic_gallery.png" alt="" /> 
      </figure> 
     </a> 
    </article> 
</div> 
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> 
    <article class="album"> 
     <h3>Galería</h3> 
     <a class="fancybox" rel="gallery3" href="http://farm2.staticflickr.com/1617/24108587812_6c9825d0da_b.jpg"> 
      <figure> 
       <img src="assets/own/images/galeria/test_pic_gallery.png" alt="" /> 
      </figure> 
     </a> 
    </article> 
</div> 

Answer 1

Nun, ich fand eine Lösung, ich weiß nicht, die besser ist, sondern arbeitet daran, die Klasse Hinzufügen von Link versteckt class="fancybox hidden" zu den anderen Elementen, aber das gleiche Album

<a class="fancybox" rel="gallery1" href="assets/own/images/1.jpg" title="album 1/1"> 
    <figure> 
     <img src="assets/own/images/galeria/test_pic_gallery.png" alt="" /> 
    </figure> 
</a> 
<a class="fancybox hidden" rel="gallery1" href="assets/own/images/2.jpg" title="album 1/2"></a> 
<a class="fancybox hidden" rel="gallery1" href="assets/own/images/3.jpg" title="album 1/3"></a> 
<a class="fancybox hidden" rel="gallery1" href="assets/own/images/4.jpg" title="album 1/4"></a> 

und diese Arbeit für die zu Alben andere ...

<a class="fancybox" rel="gallery2" href="assets/own/images/6.jpg" title="album 2/1"> 
    <figure> 
     <img src="assets/own/images/galeria/test_pic_gallery.png" alt="" /> 
    </figure> 
</a> 
<a class="fancybox hidden" rel="gallery2" href="assets/own/images/5.jpg" title="album 2/2"></a> 
<a class="fancybox hidden" rel="gallery2" href="assets/own/images/4.jpg" title="album 2/3"></a> 
<a class="fancybox hidden" rel="gallery2" href="assets/own/images/3.jpg" title="album 2/4"></a> 

hier És das Beispiel online: Galleria working

ist für den Titel im Grunde arbeitet in die Bilder ...

und hier ist die andere soluction vom Fancybox

http://jsfiddle.net/2k8EP/

Answer 2

Wenn Sie Ihre Bilder mit dem Attribut red gruppieren, können Sie ein Bild öffnen und durch Ihre Galeriebilder scrollen. Im Moment haben Sie rel = "gallery1", rel = "gallery2" usw. Ändern Sie das für jedes Bild zu: rel="gallery1".

Answer 3

Es tut mir leid, anstatt zu kommentieren (nicht genug street cred) zu antworten. Haben Sie Beispielcode?

Etwas wie folgt aus:

$(".fancybox").fancybox({ //stuff here... });