Загрузите следующий набор изображений бесконечной прокрутки из Fancybox, используя следующую стрелку - PullRequest
Новая
       29

Загрузите следующий набор изображений бесконечной прокрутки из Fancybox, используя следующую стрелку

2 голосов
/ 20 октября 2019

Я использую 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);
            });
        }
    }
});

Надеюсь, это поможет любому, имеющему ту же проблему!

...