Jquery 如何在已经打开后将新内容加载到Fancybox3？

Fancybox3打开后如何加载新内容 无需关闭当前Fancybox

我尝试使用fancybox3+砌石+无限卷轴制作图库页面

问题是，我打开的Fancybox没有加载新图像，而新内容是由ajax加载的

当Fancybox到达当前库中的最后一个元素时，将加载新内容

function loadFancy(){
    $('.fancybox').fancybox({
        selector : '[data-fancybox="gallery"]',
        afterShow: function(instance, current) {
            if (current.index  ===  instance.group.length - 1) {
                $("html, body").animate({ scrollTop: $(document).height() }, "slow");
            }
        }
    });
}

---

这就是如何获取对当前实例的引用，并使用

addContent

方法添加新的库项目：

$.fancybox.getInstance().addContent({
  'type' : 'image', 
  'src'  : '/path/to/your/image.jpg'
});

---

顺便说一句，如果你想知道为什么这个方法没有被记录下来，那么这个方法本来是计划内部使用的私有方法，但是你还是可以使用它。

你成功地实现了这个解决方案吗？我有确切的问题

以下是我目前掌握的情况：

// 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) {
            alert ('End of the line');
            // 1. Trigger infinite scroll to load next set of images
            $container.infiniteScroll('loadNextPage');
            // 2. Get the newly loaded set of images <--- ????
            // 3. And append to this instance
            // instance.addContent({
                // 'type' : 'image', 
                // 'src'  : '/path/to/your/image.jpg'
            // });
        }
    }
});

希望这能帮助有同样问题的人

将新图像附加到Fancybox的加载时间稍逊于预期，但希望通过一些调整可以优化这一点

// 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('.post');
                // 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 Fancybox instance
                instance.addContent(newImages);
            });
        }
    }
});