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

Question

在 fancybox v.3 的文档中说 "Sometimes you might need to bind fancybox to dynamically added elements. Use selector..."。一切正常，但我需要禁用画廊的自动分组并自定义多个画廊选择器。

默认行为：

$().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

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

fancybox 3 selector for dynamically added elements and multiple gallery

jquery

fancybox-3