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

问题描述：

我们使用jQuery 1.7.1和Fancybox 1.3.4。我是Fancybox的全新品牌。我从未在昨天之前使用过它，但它在我正在开发的网站上广泛使用。建立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'>

如果我改变相对属性，除了“autoGallery”什么，点击图片只是将图像打开到新窗口。

你不分享你的js代码，但我认为你的fancybox自定义脚本看起来像'$（“一[相对= autoGallery]“）。fancybox（）;'这就是为什么如果你改变'rel'属性的值不会工作。请在下面的答案中查看我的评论。 – JFK 2012-02-29 18:40:34

答

不同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();

我认为这是我正在寻找的答案。直到明天我都无法尝试，但听起来很棒！ – 2012-02-28 18:30:51

不，它不适合我。我已经有一个rel属性。它的价值是'autoGallery'。如果我将其更改为其他任何内容，则每个图像只会加载到新窗口中。 – 2012-02-29 18:27:14

很可能是因为你的fancybox脚本看起来像'$（“a [rel = autoGallery]”）。fancybox（）;'但是如果你添加'class =“fancybox”'给每个链接并使用脚本'$（“。fancybox”）。fancybox（）;'然后它会起作用 – JFK 2012-02-29 18:36:10

答

我曾与3的fancybox同样的问题 - 使用rel="gallery"和data-fancybox-group="gallery"没有工作。

发现这个codepen /拨弄，使得它的工作，通过增加.attr('data-fancybox', 'gallery');

https://codepen.io/anon/pen/EwpOxE?editors=1010

您的CodePen示例不起作用。所有3张缩略图打开了相同的画廊 – Brad 2018-02-08 21:45:15

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

相关推荐