Load next set of Infinite Scroll images from within Fancybox, using next arrow

Question

I'm using Infinite Scroll (https://infinite-scroll.com/) load a large image gallery in Wordpress. I'm also using Fancybox (https://fancyapps.com/fancybox/3/) to display those images in a lightbox.

Ideally, when the lightbox opens, the user should be able to cycle through the full image gallery (not just those currently loaded). However, Fancybox only displays images that have been loaded via Infinite Scroll prior to Fancybox being triggered. To see more images, you need to close Fancybox, scroll the page to load the additional images with Infinite Scroll, then re-open Fancybox.

Is there a way to get Fancybox to display the full image gallery, and not be constrained by the 'pages' that Infinite Scroll has currently loaded?

I'm pretty much stuck on this, so any suggestions would be welcome!

// Infinite Scroll
$container.infiniteScroll({
    path: '.nextLink',
    append: '.masonry-brick',
    history: false,
    hideNav: '.pageNav',
    outlayer: msnry
});

// Fancybox
$().fancybox({
    selector : '[data-fancybox="images"]',
    loop: false,
});

Edit: Okay, I managed to get this working with the following:

// Infinite Scroll
    $container.infiniteScroll({
        path: '.nextLink',
        append: '.masonry-brick',
        history: false,
        hideNav: '.pageNav',
        outlayer: msnry
    });

// Fancybox
$().fancybox({
    selector: '[data-fancybox="images"]',
    loop: false,
    beforeShow: function(instance, current) {
    // When we reach the last item in current Fancybox instance, load more images with Infinite Scroll and append them to Fancybox 
        if (current.index === instance.group.length - 1) { // 1. Check if at end of group
            // 2. Trigger infinite scroll to load next set of images
            $container.infiniteScroll('loadNextPage');
            // 3. Get the newly loaded set of images
            $container.on( 'load.infiniteScroll', function( event, response ) {
                var $posts = $(response).find('.masonry-brick');
                // 4. Set up an array to put them in
                var newImages = [];
                $($posts).each( function( index, element ){
                    // 5. Construct the objects
                    var a = {};
                    a['type'] = 'image';
                    a['src'] = $(this).find('a').attr('href');
                    // 6. Add them to the array
                    newImages.push(a);
                });
                // 7. And append to this instance
                instance.addContent(newImages);
            });
        }
    }
});

Hope this helps anyone having the same issue!