Infinite scroll with photoswipe
<p>I use <em>infinite scroll</em> with <em>imagesloaded</em> and <em>isotope</em> and <em>photoswipe</em> for a photo gallery. When I click on my button "More photos" it loads next photos. But I don't know how to declare those new photos to photoswipe cause the way I do it, <strong>when I click on a photo (of the new ones), it open another one</strong>.</p>

<p>I got a function to declare photos to photoswipe and this function is executed twice : the first time at the dom load, the second time when I load next photos :</p>

<pre><code>// Photoswipe declaration
new_photos_lightbox();
function new_photos_lightbox() {

    $('.gal-photos&gt;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;
        });
    });
}
</code></pre>

<p>And later I manage isotope :</p>

<pre><code>/*
 * 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();     
    });
}
</code></pre>