为fancybox链接分配多个组名

Posted 2023-05-09

【中文标题】为fancybox链接分配多个组名

【英文标题】：assign multiple group names to fancybox links

【发布时间】：2020-03-25 11:56:53

【问题描述】：

我想使用 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 文档中没有找到这样的选项。任何帮助表示赞赏。

【问题讨论】：

可以选择通过JS启动fancybox吗？

我可以开始使用 JS，但它有什么帮助？ @Kalimah

看我贴的例子

【参考方案1】：

你可以通过JS启动fancybox，选择你要显示的元素。

看这个例子：

// 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>

【讨论】：

谢谢。其实我不知道afteClose回调存在！