如何在同一页面上创建单独的Fancybox图库？

Question

我们使用的是jQuery 1.7.1和Fancybox 1.3.4.我是Fancybox的新手.我从来没有在昨天之前使用它,但它在我正在使用的网站上被广泛使用.设立Fancybox的人被终止,因为他......无关紧要.:)

我正在创建一个产品比较页面.一页最多可显示四种产品.每个产品最多可包含五个特定于该产品的图像.

目前,当我点击任何图像时,Fancybox会弹出并在页面上创建一个包含所有图像的图库.因此,如果我有一个包含五个图像的产品,则有一个五个图像库.如果我有四个产品有五个图像,那么有一个图库有二十个图像.这对我来说不太好用.

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

如何让Fancybox在一个页面上创建单独的画廊？

编辑

目前,我的rel属性设置为'autoGallery'.下面的答案之一建议我将其改为这样的东西,这将产生我正在寻找的东西:

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

如果我将rel属性更改为除"autoGallery"之外的任何内容,单击图像只会将图像打开到新窗口.

Answer 1

只需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();