Fancybox 3 adding generated content to data-group

Question

Let's say I have a page with several pictures. When the user first loads the page, it will display 3 pictures. If the user scrolls to the bottom of the page, 3 more pictures will appear via Ajax. I have the following code to open the images in Fancybox v3:

HTML

<a href="image.jpg" data-fancybox="group"><img src="image.jpg"></a>
<a href="image2.jpg" data-fancybox="group"><img src="image2.jpg"></a>
<a href="image3.jpg" data-fancybox="group"><img src="image3.jpg"></a>

JS:

$('[data-fancybox]').fancybox({
    onInit: function(instance) {
        instance.createGroup({
            type : 'html',
            src  : '<div class="fancybox-last"><a href="javascript:;" class="fancybox-" onClick="javascript:$.fancybox.close();">You reached the end</a></div>',
            opts : {
                smallBtn : false
            }
        });
    }
});

This instance.createGroup option creates a last slide that says to the user that he reached the end of the slides. Ref: https://github.com/fancyapps/fancybox/issues/1670 (not relevant to the case but may be a lead)

Well, now the user scrolls down to the bottom of the page and three more images appear, leaving HTML with the following:

<a href="image.jpg" data-fancybox="group"><img src="image.jpg"></a>
<a href="image2.jpg" data-fancybox="group"><img src="image2.jpg"></a>
<a href="image3.jpg" data-fancybox="group"><img src="image3.jpg"></a>
<a href="image4.jpg" data-fancybox="group"><img src="image4.jpg"></a>
<a href="image5.jpg" data-fancybox="group"><img src="image5.jpg"></a>
<a href="image6.jpg" data-fancybox="group"><img src="image6.jpg"></a>

However, if I click image3, when I go forward, it won't display the rest of the images. If I click image4, I can go previous (to image3) and next (to image5) but it doesn't display the images count.

Is there any way to keep updating the fancybox with the newest images to the group? Thank you in advance.

Answer 1

See - http://fancyapps.com/fancybox/3/docs/#usage - you can initialize fancyBox in two ways. You just have to use it like this:

$().fancybox({
  selector : '[data-fancybox="group"]',
  onInit : function() { .. }
});