gpt4 book ai didi

jquery - 如何在同一页面上创建单独的 Fancybox 画廊?

转载 作者:行者123 更新时间:2023-12-03 22:06:34 25 4
gpt4 key购买 nike

我们使用的是 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”之外的任何属性,则单击图像只会将图像打开到新窗口中。

最佳答案

只需为每个图库分配不同的 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();

关于jquery - 如何在同一页面上创建单独的 Fancybox 画廊?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9486034/

25 4 0
文章推荐: jQuery 如何从
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com