6

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?

4
  • 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."
    – Artem
    Commented Oct 8, 2018 at 5:46
  • @Artem, i expanded the description of the question as much as possible.
    – MGreen
    Commented Oct 8, 2018 at 6:23
  • Hello @MGreen What about removing the data-fancybox from all links and manual init of fancybox with other selector than default? :) Commented Oct 8, 2018 at 6:57
  • Hey. No, I tried, it didn't work. :)
    – MGreen
    Commented Oct 8, 2018 at 7:20

1 Answer 1

5

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

2
  • 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.
    – MGreen
    Commented Oct 8, 2018 at 7:27
  • Wow, although this is an old answer. This worked for me! (V3) helpt me out a lot. Thanks!
    – Jay-oh
    Commented Feb 23, 2021 at 13:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.