Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

fancybox 3 selector for dynamically added elements and multiple gallery

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?

like image 400
MGreen Avatar asked Oct 08 '18 05:10

MGreen


1 Answers

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

like image 133
Janis Avatar answered Sep 21 '22 09:09

Janis