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?
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With