如何在同一页面上创build单独的Fancybox图库?

我们正在使用jQuery 1.7.1和Fancybox 1.3.4。 我是Fancybox的全新品牌。 我以前从来没有使用过它,但它在我正在使用的网站上被广泛使用。 build立Fancybox的人被终止,因为他是…无关紧要。 🙂

我正在创build一个产品比较页面。 多达四个产品将显示在一个页面上。 每个产品最多可以有五个特定于该产品的图像。

目前,当我点击任何图像,Fancyboxpopup窗口打开,并创build一个页面上的所有图像的画廊。 所以,如果我有一个五个图像的产品,那么有一个五个图像库。 如果我有五个图像的四个产品,有一个有二十个图像的画廊。 这对我并不适用。

我想要的是每个产品都有自己的画廊。 如果他们点击产品A,他们将只能看到与产品A相关的图像。如果他们点击产品B,您就可以得到它。

我如何使Fancybox在单个页面上创build单独的画廊?

编辑

目前,我的rel属性被设置为“autoGallery”。 下面的答案之一表明,我改变它是这样的,这将产生我在找什么:

<img rel='Gallery1'> <img rel='Gallery1'> <img rel='Gallery2'> <img rel='Gallery2'> <img rel='Gallery3'> <img rel='Gallery3'> 

如果我将rel属性更改为“autoGallery”以外的任何内容,则单击该图像就会将该图像打开到新窗口中。

只要给每个画廊分配一个不同的rel属性

 <a class="fancybox" rel="gallery01" href="product01/image01.jpg">one</a> <a class="fancybox" rel="gallery01" href="product01/image02.jpg">one</a> <a class="fancybox" rel="gallery01" href="product01/image03.jpg">one</a> <a class="fancybox" rel="gallery01" href="product01/image04.jpg">one</a> <a class="fancybox" rel="gallery02" href="product02/image01.jpg">two</a> <a class="fancybox" rel="gallery02" href="product02/image02.jpg">two</a> <a class="fancybox" rel="gallery02" href="product02/image03.jpg">two</a> <a class="fancybox" rel="gallery03" href="product03/image01.jpg">three</a> <a class="fancybox" rel="gallery03" href="product03/image02.jpg">three</a> <a class="fancybox" rel="gallery03" href="product03/image03.jpg">three</a> 

…他们都可以使用相同的脚本:

 $(".fancybox").fancybox();