用于动态添加元素和多个画廊的 fancybox 3 选择器

Question

在fancybox v.3 的文档中说“有时您可能需要将fancybox 绑定到动态添加的元素。使用选择器...”。一切都很好，但我需要禁用画廊的自动分组并自定义多个画廊选择器。

默认行为：

$().fancybox({
    selector : '[data-fancybox]:visible'
});

所有带有 data-fancybox 的可见链接都将合并到一个画廊中。 我需要根据data-fancybox的值创建不同的gallery，比如data-fancybox="gallery1"、data-fancybox="gallery2"等。同时fancybox要继续监听动态添加的内容。

你能帮帮我吗？

Answer 1

这实际上是一个有效的问题，因为 v3 的早期版本就像您描述的那样工作 - 项目按 data-fancybox 属性分组。但是，在实践中，这引起了一些混乱，因为data-fancybox属性默认添加了点击事件。

但是，不要害怕创建自己的触发器函数，它就这么简单。例如，您可以选择使用data-group 属性进行分组：

$(document).on('click', '[data-group]', function() {
  var $this = $(this);
  var group = $('[data-group="' + $this.data('group') + '"]');

  $.fancybox.open(group, {
    // Put your options here, for example:
    thumbs : {
      autoStart : true
    }
  }, group.index($this));

  return false;
});

演示 - https://codepen.io/anon/pen/ZqBJyj?editors=1010