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

Question

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

jqueryfancybox

13

我们正在使用jQuery 1.7.1和Fancybox 1.3.4。我对Fancybox是全新的，昨天之前我从未使用过它，但它被广泛用于我正在工作的网站上。设置Fancybox的人已经被解雇了，因为他不再相关。 :)

我正在创建一个产品比较页面。在单个页面上将显示高达四种产品。每种产品可能具有最多五张特定于该产品的图像。

目前，当我点击任何图像时，Fancybox会弹出并在页面上创建所有图像的库。所以，如果我有一种产品有五张图片，就会有五张图片的库。如果我有四个产品有五张图片，就会有一个包含20张图片的库。这对我来说效果不好。

我想要的是每种产品都有自己的画廊。如果他们点击产品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'以外的任何值，那么点击图片就会在新窗口中打开图片。

- Evik James

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

5个回答

4

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

- Penny Liu

2

我遇到了与Fancybox 3相同的问题 - 使用rel="gallery"和data-fancybox-group="gallery"无法正常工作。

我找到了这个代码片段/范例，通过添加.attr('data-fancybox', 'gallery');使其正常工作。

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

- Morten Bak

1

你的 CodePen 示例无法运行。所有三个缩略图都打开了同一个画廊。 - Brad

0

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

- David Hirtz

0

我尝试使用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
  });
});

- Nalaka beligammana

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JFK · Accepted Answer

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