How to open different Gallery for each image using fancybox

Question

I'm using fancybox-2.1.5 and I can use it as normal usage like $('.fancybox').fancybox();

but now I need to open different gallery for each click on image tag

for example:

<a href='#'><img src='photo-a.jpg' class='fancybox' rel='gallery'/></a> <a href='#'><img src='photo-b.jpg' class='fancybox' rel='gallery'/></a> <a href='#'><img src='photo-c.jpg' class='fancybox' rel='gallery'/></a>
when photo-a.jpg clicked.must open gallery for photo-1.jpg,photo-2.jpg and photo-3.jpg

when photo-b.jpg clicked.must open gallery for photo-4.jpg,photo-5.jpg and photo-6.jpg... etc

How to make this using fancybox and ajax if necessary?

score 1 · Accepted Answer · answered Jan 17 '15 at 06:45

Just assign different rel for different gallery.

<a href='#'><img src='photo-a.jpg' class='fancybox' rel='gallery1'/></a>
            <img src='photo-a1.jpg' class='fancybox' rel='gallery1'/>
            <img src='photo-a2.jpg' class='fancybox' rel='gallery1'/>
<a href='#'><img src='photo-b.jpg' class='fancybox' rel='gallery2'/></a>
           <img src='photo-b1.jpg' class='fancybox' rel='gallery2'/>
           <img src='photo-b3.jpg' class='fancybox' rel='gallery2'/>
<a href='#'><img src='photo-c.jpg' class='fancybox' rel='gallery3'/></a>
            <img src='photo-c1.jpg' class='fancybox' rel='gallery3'/>
            <img src='photo-c2.jpg' class='fancybox' rel='gallery3'/>

just like that.

Note: always read documentation before apply

Bear in mind the code above will open the thumbnail (`` tag) in fancybox and will set a `style="display:none"` attribute to that tag after placing it back in the document flow. The *class* fancybox should be placed in the `` tag in normal conditions. Always read the documentation before apply ;) — JFK, Jan 17 '15 at 19:25

How to open different Gallery for each image using fancybox

1 Answers1