Бесконечная прокрутка с фотосвайпом

Я использую бесконечную прокрутку с загруженными изображениями и isotope и photoswipe для фотогалереи. Когда я нажимаю на кнопку «Еще фотографии», загружаются следующие фотографии. Но я не знаю, как объявить эти новые фотографии фотосалфеткой, потому что, как я это делаю, когда я нажимаю на фотографию (из новых), она открывает другую.

У меня есть функция объявления фотографий для фотостирания, и эта функция выполняется дважды: первый раз при загрузке dom, второй раз, когда я загружаю следующие фотографии:

// Photoswipe declaration
new_photos_lightbox();
function new_photos_lightbox() {

    $('.gal-photos>ul').each( function() {
        var $pic     = $(this),
            getItems = function() {

                var items = [];
                $pic.find('a').each(function() {

                    var $href   = $(this).attr('href'),
                        $size   = $(this).data('size').split('x'),
                        $width  = $size[0],
                        $height = $size[1];
                    var item = {
                        src : $href,
                        w   : $width,
                        h   : $height
                    }

                    items.push(item); 
                });

                return items;
            }
        var items = getItems();

        var $pswp = $('.pswp')[0];
        $pic.on('click','li',function(event){
            event.preventDefault();

            var $index = $(this).index();
            console.log($(this));
            var options = {
                index: $index,
                bgOpacity: 0.7,
                showHideOpacity: true
            }

            // Initialisation PhotoSwipe

            var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
            lightBox.init();

            return false;
        });
    });
}

И позже я управляю изотопом:

/*
 * Isotope
 */

var len = $('script[src*="js/isotope.pkgd.min.js"]').length; 
if (len != 0) {
    var $loaderAjax = $('.loader-ajax');
    var $container = $('.grid');
    $loaderAjax.show();     
    $container.imagesLoaded( function(){
        $container.isotope({
            itemSelector : '.grid-item',
            masonry: {
                columnWidth: 200,
                isAnimated: true,
                isFitWidth: true,
                gutter: 20
            }
        });

        $container.infinitescroll({
                navSelector  : '#ms-gallery-nav',    
                nextSelector : '#ms-gallery-nav a', 
                itemSelector : '.grid-item',   
                loading: {
                    msgText: 'loading photos...',
                    finishedMsg: 'No more photos',
                    img: '../img/aj-loader.gif'
                }
            },
            function( newElements ) {
                var $newElems = $(newElements).css({
                    opacity: 0
                });
                $newElems.imagesLoaded(function () {
                    $newElems.animate({
                        opacity: 1
                    });
                    $container.isotope('appended', $newElems, true);
                }); 
                new_photos_lightbox();
            } 
        );

        // Deactivation infinite scroll the benefit of More button
        $container.infinitescroll('unbind');
        $('#next-page-button').on('click', function(e) {
            e.preventDefault();
            $container.infinitescroll('retrieve');

            $(this).blur();
        });

        $("ul.grid li").css({'display': 'list-item'});
        $("div.filter-button-group").animate({'opacity':'1'},500); 
        $loaderAjax.hide();     
    });
}

person Manhattan    schedule 28.05.2016    source источник


Ответы (1)


Очень просто

 $pic.find('figure').each(function(e,i) {

    $(i).on('click', 'a', function (e) {

      var $pswp = $('.pswp')[0];  

      ....             
    });
 });
person Fatih Erol    schedule 14.08.2018