当无限滚动更新页面内容时，下一张图片不起作用

Question

我使用 fancybox 3 和 infinite sctoll。当我向下滚动时一切正常。但是，如果我打开 1 张图像并按下一个按钮，由 $infScroll.infiniteScroll('loadNextPage'); 加载的项目在页面上，但在当前页面的末尾，下一个图像将不会通过下一个按钮打开。如果关闭当前弹出窗口并再次打开，则可以在下一页之前再次进入下一页。为什么动态添加的项目不能通过下一步按钮工作？

$('.gallery').fancybox({
    selector : ".img-box",
    ...
    ,
    afterShow: function(instance, item){
        if (item.index  >=  instance.group.length - 10) {
            $infScroll.infiniteScroll('loadNextPage');
        }
    }
});

Answer 1

Adding/removing 页面中的项目不会自动影响当前打开的 fancybox 画廊。您需要手动更新图库 -

// Call `createGroup` with collection of fresh links 
$.fancybox.getInstance().createGroup( $('.img-box')  );

// Update controls
$.fancybox.getInstance().updateControls();

当无限滚动更新页面内容时，下一张图片不起作用

Next image doesnt work when page content updated by infinite-scroll

javascript

infinite-scroll

fancybox-3