jQuery 如何在同一页面上创建单独的 Fancybox 画廊？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9486034/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create separate Fancybox galleries on the same page?
提问by Evik James
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. :)
我们使用 jQuery 1.7.1 和 Fancybox 1.3.4。我是 Fancybox 的新手。我在昨天之前从未使用过它，但它在我正在工作的网站上被广泛使用。创办 Fancybox 的人被解雇了，因为他是……无关紧要的。:)
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.
我正在创建一个产品比较页面。最多四个产品将显示在一个页面上。每个产品最多可以有五个特定于该产品的图像。
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.
目前，当我单击任何图像时，Fancybox 会弹出并创建页面上所有图像的图库。所以，如果我有一个带有五张图片的产品，那么就有一个五张图片库。如果我有四个带有五张图片的产品，那么就有一个带有二十张图片的画廊。这对我来说效果不佳。
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.
我想要的是每个产品都有自己的画廊。如果他们点击产品 A，他们将只看到与产品 A 相关联的图像。如果他们点击产品 B...你明白了。
How can I make Fancybox create separate galleries on a single page?
如何让 Fancybox 在单个页面上创建单独的画廊？
EDIT
编辑
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:
目前，我的 rel 属性设置为“autoGallery”。以下答案之一建议我将其更改为这样的内容，这将产生我正在寻找的内容：
<img rel='Gallery1'>
<img rel='Gallery1'>
<img rel='Gallery2'>
<img rel='Gallery2'>
<img rel='Gallery3'>
<img rel='Gallery3'>
If I change the rel attribute to anything except for 'autoGallery', clicking on the image just opens the image into a new window.
如果我将 rel 属性更改为除“autoGallery”之外的任何内容，单击图像只会将图像打开到新窗口中。
回答by JFK
Just assign a different relattribute to each gallery
只需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>
... and they all can use the same script:
...他们都可以使用相同的脚本：
$(".fancybox").fancybox();
回答by Penny Liu
Here is one more example (based on fancyBox3). Adding same value for data-fancyboxattribute. (for example, data-fancybox="group")
这里还有一个例子（基于fancyBox3）。为data-fancybox属性添加相同的值。（例如，data-fancybox="group"）
@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');
body {
margin: 0;
padding: 10vh 10vw;
color: #444;
}
h1 {
font-weight: 700px;
}
h2 {
font-weight: 600;
}
a,
a:hover {
color: #ff5268;
}
.imglist {
font-size: 0;
}
.imglist a {
display: inline-block;
margin: 10px 10px 0 0;
}
.imglist a:last-of-type {
margin-right: 0;
}
.imglist a img {
vertical-align: top;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.js"></script>
<h2>fancybox v3.5.2 - Grouping galleries</h2>
<p>
Groups are created by adding the same <code>data-fancybox</code> attribute value
</p>
<hr class="my-5" />
<h4>Group 1 Gallery</h4>
<p class="imglist" style="max-width: 1000px;">
<a href="https://source.unsplash.com/juHayWuaaoQ/1500x1000" data-fancybox="group1" data-caption="Backpackers following a dirt trail">
<img src="https://source.unsplash.com/juHayWuaaoQ/240x160" />
</a>
<a href="https://source.unsplash.com/eWFdaPRFjwE/1500x1000" data-fancybox="group1" data-caption="Mallorca, Llubí, Spain">
<img src="https://source.unsplash.com/eWFdaPRFjwE/240x160" />
</a>
<a href="https://source.unsplash.com/c1JxO-uAZd0/1500x1000" data-fancybox="group1" data-caption="Danish summer">
<img src="https://source.unsplash.com/c1JxO-uAZd0/240x160" />
</a>
<a href="https://source.unsplash.com/eXHeq48Z-Q4/1500x1000" data-fancybox="group1" data-caption="Sunrise above a sandy beach">
<img src="https://source.unsplash.com/eXHeq48Z-Q4/240x160" />
</a>
</p>
<h4>Group 2 Gallery</h4>
<p class="imglist" style="max-width: 1000px;">
<a href="https://source.unsplash.com/RFgO9B_OR4g/1500x1000" data-fancybox="group2" data-caption="Woman on a slope by the shore">
<img src="https://source.unsplash.com/RFgO9B_OR4g/240x160" />
</a>
<a href="https://source.unsplash.com/7bwQXzbF6KE/1500x1000" data-fancybox="group2" data-caption="Mountain hiking sunset">
<img src="https://source.unsplash.com/7bwQXzbF6KE/240x160" />
</a>
<a href="https://source.unsplash.com/NhU0nUR7920/1500x1000" data-fancybox="group2" data-caption="Sunset Picnic">
<img src="https://source.unsplash.com/NhU0nUR7920/240x160" />
</a>
<a href="https://source.unsplash.com/B2LYYV9-y0s/1500x1000" data-fancybox="group2" data-caption="On them Indiana Nights">
<img src="https://source.unsplash.com/B2LYYV9-y0s/240x160" />
</a>
</p>回答by Morten Elmholt Bak
I had the same problems with Fancybox 3 - using rel="gallery"and data-fancybox-group="gallery"didnt work.
我有同样的问题的fancybox 3 -使用rel="gallery"并data-fancybox-group="gallery"没有工作。
Found this codepen / fiddle that made it work, by adding .attr('data-fancybox', 'gallery');
通过添加，找到了使其工作的代码笔/小提琴 .attr('data-fancybox', 'gallery');
回答by David Hirtz
Fancybox 3 uses the data-fancyboxattribute to group galleries. Apparently relis not recognized anymore. So simply use the same identifier for all elements you want to group in a gallery.
Fancybox 3 使用该data-fancybox属性对画廊进行分组。显然rel已经不被认可了。因此，只需对要在图库中分组的所有元素使用相同的标识符即可。
