Question

打开Fancybox3 alreay之后如何加载新内容而不关闭当前的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");
            }
        }
    });
}

Answer 1

这是获取当前实例的引用并使用addContent方法添加新图库项目的方法：

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

btw，如果您想知道为什么未记录此方法，那么该方法最初计划为内部使用的私有方法，但是您仍然可以使用它。

Answer 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的加载时间略短于期望的时间，但是希望可以通过一些调整对其进行优化。

打开后如何将新内容加载到Fancybox3？

2 个答案: