如何在同一页面上创建单独的 Fancybox 画廊？答案

【问题标题】：How to create separate Fancybox galleries on the same page?如何在同一页面上创建单独的 Fancybox 画廊？
【发布时间】：2012-02-28 16:43:39
【问题描述】：

我们正在使用 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”以外的任何属性，单击图像只会将图像打开到新窗口。

【问题讨论】：

您没有共享您的 js 代码，但我假设您的 fancybox 自定义脚本看起来像 $("a[rel=autoGallery]").fancybox();，这就是为什么如果您更改 rel 属性的值它将不起作用的原因。请在下面的答案中查看我的评论。

标签： jquery fancybox

【解决方案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();

【讨论】：

我认为这就是我正在寻找的答案。我要到明天才能试一试，但听起来很棒！
不，它对我不起作用。我已经有一个 rel 属性。它的价值是'autoGallery'。如果我将其更改为其他任何内容，则每个图像都会加载到一个新窗口中。
很可能是因为您的花式脚本看起来像 $("a[rel=autoGallery]").fancybox();，但是如果您将 class="fancybox" 添加到每个链接并使用我在上面$(".fancybox").fancybox(); 的答案中的脚本，那么它将起作用
你是正确的。非常感谢您的帮助！
这是一个很好的提醒，fancybox 如何使用 rel 来组织多个项目。谢谢！

【解决方案2】：

这里还有一个例子（基于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>

【讨论】：

【解决方案3】：

我在使用 Fancybox 3 时遇到了同样的问题 - 使用 rel="gallery" 和 data-fancybox-group="gallery" 不起作用。

通过添加.attr('data-fancybox', 'gallery'); 找到了使它工作的这个codepen / fiddle

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

【讨论】：

您的 CodePen 示例不起作用。所有 3 个缩略图都打开同一个图库

【解决方案4】：

Fancybox 3 使用data-fancybox 属性对画廊进行分组。显然rel 不再被识别。因此，只需为要在图库中分组的所有元素使用相同的标识符。

【讨论】：

【解决方案5】：

我尝试使用 rel 但它不适合我，

但我得到变量的 rel 值并在启用滑块时检查它。

<a href="" rel="gallery01" data-fancybox="slide"></a>
$('[data-fancybox="slide"]').each(function(){
    var relValue = $(this).attr('rel');
      $('[data-fancybox="slide"][rel="'+relValue+'"]').fancybox({
//options
  });
});

【讨论】：