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

【问题标题】：How to load new content to Fancybox3 after already opened?已经打开后如何将新内容加载到 Fancybox3？
【发布时间】：2019-10-26 21:08:23
【问题描述】：

Fancybox3 已经打开后如何加载新内容没有关闭当前的 Fancybox。

我尝试使用fancybox3 + masonry +无限滚动制作画廊页面

问题是我打开的 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");
            }
        }
    });
}

【问题讨论】：

标签： jquery fancybox

【解决方案1】：

您可以通过以下方式获取当前实例的引用并使用addContent 方法添加新图库项目：

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

顺便说一句，如果您想知道为什么没有记录此方法，那么此方法最初计划为内部使用的私有方法，但您仍然可以使用它。

【讨论】：

【解决方案2】：

您是否设法为此实施了解决方案？我有确切的问题。

这是我目前所拥有的：

// 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({
    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);
            });
        }
    }
});

希望这对遇到同样问题的人有所帮助！

将新图像附加到 Fancybox 的加载时间略低于预期，但希望可以通过一些调整来优化。

【讨论】：