将多个组名分配给 fancybox 链接

Question

我想使用 Fancybox 图库显示来自单个图库的 3 种图像。 显示全部、显示红色和显示蓝色。

在一个简单的 fancybox 画廊中，我使用 data-fancybox="group" 将一系列图像分组到一个画廊中。但在这种情况下，我需要从 GROUP 中排除其他图像，并显示具有匹配颜色的剩余项目。

到目前为止，我决定使用关于颜色的额外数据标签从具有不匹配颜色的图像中删除 data-fancybox 属性：

<a data-fancybox-trigger="group">Show all</a>
<a onclick="filterImages('blue')">Filter Blues</a>
<a onclick="filterImages('red')">Filter Reds</a>

<a data-color="red" data-fancybox="group">
    <img src="1.jpg">
</a>
<a data-color="red" data-fancybox="group">
    <img src="2.jpg">
</a>
<a data-color="blue" data-fancybox="group">
    <img src="3.jpg">
</a>
<a data-color="blue" data-fancybox="group">
    <img src="4.jpg">
</a>

<script>
function filterImages(color){
    $('[data-fancybox]').removeAttr("data-fancybox");
    $('[data-color="'+ color +'"]').attr("data-fancybox","group");
    //Finally simulate click on first matching element.
    $('[data-fancybox]')[0].click();
}
</script>

问题是我正在从不匹配的图像中删除 data-fancybox 属性，我不知道如何在用户关闭 fancybox 画廊时再次恢复此属性。另一种解决方案是为每个元素分配多个组名，但我在 Fancybox 文档中没有找到这样的选项。感谢任何帮助。

Answer 1

您可以通过JS启动fancybox，select您要展示的元素

看这个例子：

// Fancybox hides selected element, so use afterClose event to show all elements
$(document).on('afterClose.fb', function(e, instance, slide) {
  $('.images a').show();
});

$('.filter').on('click', 'span', function() {
  let open = jQuery(this).attr("data-open");
  let selector = '.images a';
  if (open == 'blue')
    selector = ".images [data-color='blue']";
  else if (open == 'red')
    selector = ".images [data-color='red']";
  $.fancybox.open($(selector));
});

.filter {
  border-radius: 5px;
  display: inline-flex;
  background-color: rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 1rem;
  transition: all 0.3s;
}

.filter span {
  padding: 0.5rem;
  cursor: pointer;
}

.filter span:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet" />

<div class='filter'>
  <span data-open='all'>Show all</span>
  <span data-open='blue'>Filter Blues</span>
  <span data-open='red'>Filter Reds</span>
</div>
<div class='images'>
  <a data-color="red" >
    <img src="https://picsum.photos/200/400">
  </a>
  <a data-color="red" >
    <img src="https://picsum.photos/200/500">
  </a>
  <a data-color="blue" >
    <img src="https://picsum.photos/300/300">
  </a>
  <a data-color="blue" >
    <img src="https://picsum.photos/200/200">
  </a>
</div>

将多个组名分配给 fancybox 链接

assign multiple group names to fancybox links

jquery

fancybox-3