javascript - 无限滚动与照片滑动

Question

我使用无限滚动与imagesloaded和同位素以及照片滑动来创建照片库。当我单击“更多照片”按钮时，它会加载下一张照片。但我不知道如何将这些新照片声明为 Photoswipe，因为我的做法是，当我单击(新照片中的)一张照片时，它会打开另一张照片。

我有一个函数来将照片声明为 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();     
    });
}

Answer 1

非常简单

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

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

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

      ....             
    });
 });