3

我正在使用 Infinite Scroll ( https://infinite-scroll.com/ ) 在 Wordpress 中加载大型图片库。我还使用 Fancybox ( https://fancyapps.com/fancybox/3/ ) 在灯箱中显示这些图像。

理想情况下，当灯箱打开时，用户应该能够循环浏览整个图片库（不仅仅是当前加载的图片库）。然而，Fancybox 只显示在 Fancybox 被触发之前通过无限滚动加载的图像。要查看更多图片，您需要关闭 Fancybox，滚动页面以无限滚动加载其他图片，然后重新打开 Fancybox。

有没有办法让 Fancybox 显示完整的图片库，并且不受 Infinite Scroll 当前加载的“页面”的限制？

我几乎坚持这一点，所以任何建议都会受到欢迎！

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

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

编辑：好的，我设法让这个工作与以下：

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

希望这可以帮助任何有同样问题的人！

4

0 回答 0