如何在同一页面上创建单独的Fancybox画廊? [英] How to create separate Fancybox galleries on the same page?

问题描述

我们正在使用jQuery 1.7.1和Fancybox 1.3.4.我是Fancybox的新手.昨天以前我从未使用过它，但是在我正在研究的站点上它已被广泛使用.设置Fancybox的人被终止，因为他与……无关. :)

We are using jQuery 1.7.1 and Fancybox 1.3.4. I am brand new to Fancybox. I have never used it before yesterday, but it is used widely on a site that I am working on. The person who set up Fancybox was terminated because he was ... irrelevant. :)

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

I am creating a product comparison page. Up to four products will display on a single page. Each product may have up to five images specific to that product.

当前，当我单击任何图像时，Fancybox会弹出并创建页面上所有图像的图库.因此，如果我有一个带有五张图片的产品，那么会有一个五张图片库.如果我有四个带有五个图像的产品，那么有一个画廊带有二十个图像.这对我来说不太好.

Currently, when I click on any image, Fancybox pops open and creates a gallery of all of the images on the page. So, if I have one product with five images, there is a five image gallery. If I have four products with five images, there is one gallery with twenty images. This doesn't work well for me.

我想要的是每个产品都有其自己的画廊.如果他们单击产品A，他们将仅看到与产品A相关的图像.如果他们单击产品B ...，您将得到它.

What I want is for each product to have its own gallery. If a they click on Product A, they will see only the images associated with Product A. If they click on Product B... you get it.

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

How can I make Fancybox create separate galleries on a single page?

编辑

当前，我的rel属性设置为'autoGallery'.以下答案之一建议我将其更改为类似的内容，这将产生我想要的内容:

Currently, my rel attribute is set to 'autoGallery'. One of the answers below suggested that I change it to something like this, which would produce what I am looking for:

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

如果我将rel属性更改为'autoGallery'以外的任何内容，则单击图像只会将图像打开到新窗口中.

If I change the rel attribute to anything except for 'autoGallery', clicking on the image just opens the image into a new window.

推荐答案

只需为每个图库分配一个不同的rel属性

Just assign a different rel attribute to each gallery

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

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

... and they all can use the same script:

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

这篇关于如何在同一页面上创建单独的Fancybox画廊?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！