jQuery fancybox多张专辑

Question

I'm trying to use the FancyBox to create an album in a single click, that is, to open me "N" of images each you see that I click on each picture, do not know how to do this if via JS, internet search and many options but not achieved anything yet...

I do not want to open an image with a single click but open several to see an album

here is my code:

<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

If you group your images using the red attribute, that will allow you to open one image and scroll through your gallery images. At the moment you have rel="gallery1", rel="gallery2", etc. Change that to: rel="gallery1" for every image.

Answer 2

I am sorry to keep answeting instead of commenting (not enough street cred). Do you have sample code?

Something like this:

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

Answer 3

Well, I found a solution i don't know is the most better but is working adding the class hidden at link class="fancybox hidden" to the others elements but the same 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>

and this work for the others albums too...

<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>

here es the example online: Galleria working

is working for the titles at bottom into the images...

and here is the other soluction by the Fancybox

http://jsfiddle.net/2k8EP/