Question

我将无限滚动与 imagesloaded 和 isotope 以及 photoswipe 用于照片库。当我点击我的按钮＆＃34;更多照片＆＃34;它加载下一张照片。但是，我不知道如何将这些新照片声明为照片，这会导致我这样做，当我点击一张照片（新的照片）时，会打开另一张照片。

我有一个函数来向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];  

      ....             
    });
 });

带有照片的无限滚动

1 个答案: