如何使用 fancybox 为每个图像打开不同的画廊

Question

我正在使用 fancybox-2.1.5，我可以像 $('.fancybox').fancybox();

一样正常使用它

但现在我需要为每次点击图片标签打开不同的图库

例如：

<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>
当 photo-a.jpg clicked.must 打开图库时 photo-1.jpg,photo-2.jpg and photo-3.jpg

当 photo-b.jpg clicked.must 为 photo-4.jpg,photo-5.jpg and photo-6.jpg 打开图库...等等

如果需要，如何使用 fancybox 和 ajax 来制作这个？

Answer 1

只需为不同的画廊分配不同的 rel。

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

就这样。

注意：请务必在申请前阅读文档

如何使用 fancybox 为每个图像打开不同的画廊

How to open different Gallery for each image using fancybox

jquery

fancybox

image-gallery