jquery - fancybox 3 选择器，用于动态添加元素和多个图库

Question

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

默认行为:

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

所有带有 data-fancybox 的可见链接都将合并到一个库中。我需要根据data-fancybox的值创建不同的画廊，例如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