fancybox 3 selector for dynamically added elements and multiple gallery

Question

In the documentation of fancybox v.3 says "Sometimes you might need to bind fancybox to dynamically added elements. Use selector...". Everything is fine, but I need to disable the automatic grouping of galleries and customize multiple gallery selector.

Default behavior:

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

All visible links with data-fancybox will be merged into ONE gallery. I need to create different galleries according to the values of data-fancybox, like data-fancybox="gallery1", data-fancybox="gallery2", etc. At the same time, fancybox should continue to listen to dynamically added content.

Can you help me, please?

Manning

could you provide in your question the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example." – Tatro

@Artem, i expanded the description of the question as much as possible. – Manning

Hello @Manning What about removing the data-fancybox from all links and manual init of fancybox with other selector than default? :) – Synge

Hey. No, I tried, it didn't work. :) – Manning

Answer 1

This is actually a valid question, because early versions of v3 worked like you described - items were grouped by data-fancybox attribute. But, in the practice, that caused some confusion, because data-fancybox attribute adds click event by default.

But, do not be afraid to create your own trigger function, it so easy. For example, you could choose to use data-group attribute for grouping:

$(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;
});

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

Keefe

Thanks so much. It's nice to hear the answer from the author of the script. I came to a similar decision, but thought there was an easier way, so I asked here. – Manning

Wow, although this is an old answer. This worked for me! (V3) helpt me out a lot. Thanks! – Beveridge