fancybox 3 селектор для динамически добавляемых элементов и нескольких галерей - PullRequest
Новая
       4

fancybox 3 селектор для динамически добавляемых элементов и нескольких галерей

0 голосов
/ 08 октября 2018

В документации fancybox v.3 говорится: «Иногда вам может понадобиться привязать fancybox к динамически добавляемым элементам. Используйте селектор ...».Все хорошо, но мне нужно отключить автоматическую группировку галерей и настроить несколько селекторов галерей.

Поведение по умолчанию: 

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

Все видимые ссылки с data-fancybox будут объединены в ОДИН.галерея.Мне нужно создавать разные галереи в соответствии со значениями data-fancybox, например data-fancybox = "gallery1", data-fancybox = "gallery2" и т. Д. В то же время fancybox должен продолжать прослушивать динамически добавляемый контент.

Можете ли вы помочь мне, пожалуйста?

1 Ответ

0 голосов
/ 08 октября 2018

Это действительно правильный вопрос, потому что ранние версии 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

...