fancybox 3 not available for new content loaded with JSON+DOM Manipulation (for endless scrolling)

Question

I have an picture gallery and use fancybox v3. By entering the webseite, the first 20 pictures are loaded (generated with PHP) and fancybox is connected to those pictures.

The HTML part looks like this:

##loop##
<div class="item">
  <a  data-fancybox="group" href="<?= $i?>">
        <img src="/thumbnail/<?= $i?>"  />
  </a>
</div>
##/loop##

Fancybox is initialized like that:

$().fancybox({
                selector: '[data-fancybox="group"]',
                loop: true,

            });

..this works fine.

Now, if the user reaches the end of page, new content in JSON format is loaded an inserted into the website using DOM manipulation. For this, I use an placeholder, which is an empty HTML template, hidden in the webseite. I clone that DOM element into the gallery and fill new elements with the data coming from the JSON request.

var px = $('#picturePlaceholder').clone().appendTo('.mygallery');
            px.removeAttr('id');
            px.children('a').attr('href', jsonValues.pictureURL);
            px.children('a').children('img').attr('src', jsonValues.thumbnailURL);
            px.children('a').attr('data-fancybox', "group" );

Unfortunately, this does not work. If I click on an new added picture, the fancybox opens and (in every case) the first picture from the original set is shown. Insight the fancybox I can "walk" trough all pictures from the initial set, but I'm unable to reach/see the new loaded pictures.

If I change the JS-Line
px.children('a').attr('data-fancybox', "group" ); to px.children('a').attr('data-fancybox', "group2" );, a new fancybox-instance has been applied to the new (JSON data) record.

But, the picture viewer is unable to slide from the first picture of the initial set to the last picture of the 2nd (JSON loaded) set.

If the users reaches the end of the webpage again, an new set of pictures is loaded again and inserted into the gallery, which seams to destroys the whole fancybox functionality. Fancybox no longer runs correctly. Even the existing pictures cannot be opened properly.

So how could I process JSON data, which is added to my gallery and inject the new data into the existing fancybox set?

Answer 1

To answer my own question in the case, that someone have the same problem: My problem was based on a bug in fancybox, which is fixed in version 3.2.21 and later.