javascript - 无限滚动与光影

我将无限滚动与图像加载，同位素和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();
    });
}

最佳答案

很容易

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

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

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

      ....
    });
 });