Question

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

默认行为：

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

所有带有data-fancybox的可见链接将合并到一个图库中。我需要根据data-fancybox的值创建不同的图库，例如data-fancybox =“ gallery1”，data-fancybox =“ gallery2”等。同时，fancybox应该继续侦听动态添加的内容。 / p>

可以帮我吗？

Answer 1

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

但是，不要害怕创建自己的触发函数，这很容易。例如，您可以选择使用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选择器，用于动态添加元素和多个图库

1 个答案: