Infinite scroll + photoswipe : ajout d'éléments

Soit :
Une galerie photo avec lightbox qui s'affiche en infinite scroll avec isotope et qui fonctionne :
isotope.pkgd.js
+ infinitescroll.js
+ photoswipe.js

Et moi avec mon air c... et ma vue pas basse qui ne sait pas comment ajouter les éléments à ma lightbox lorsque je charge plusss de photos :

Gestion de la lightbox :

    /*
     * Déclaration lightbox sur galeries photos page Photos
     */
    $('.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($index);
            var options = {
                index: $index,
                bgOpacity: 0.7,
                showHideOpacity: true
            }

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

            return false;
        });
    });

Gestion de la galerie :

    /*
     * Gestion de la galerie photo avec 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: 'Chargement des contenus...',
                        finishedMsg: 'Plus de 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);
                    }); 
                } 
            );
            
            // Désactivation du scroll infini au profit d'un bouton Charger plus
            $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();     
        });
    }
    

Je sais, pourquoi jme lance dans des trucs que jsais pas faire... ben pour arriver à les faire ensuite ^^

Alors, la suite de Joe la bricole en js :
J'ai mis ma déclaration à la lightbox dans une fonction que j'appelle une première fois au chargement de la page et que j'appelle une seconde fois (voir plus bas) après avoir chargé les photos supplémentaires : un clic sur une photo (nouvellement chargée) affiche une photo oui, mais pas la bonne Ce qui me parait logique vu que j'ai pas trouvé comment réinitialiser ma lightbox. J'essaie des destroy sur l'instance mais visiblement, je ne sais pas trouver l'instance en question...

    /*
     * Renvoie les photos avec les nouvelles à la lightbox
     */  
    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;
            });
        });
    }

    /*
     * Gestion de la galerie photo avec 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: 'Chargement des contenus...',
                        finishedMsg: 'Plus de 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();
                } 
            );
            
            // Désactivation du scroll infini au profit d'un bouton Charger plus
            $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();     
        });
    }

Salut, juste pour tester, au lieu de .index() fait un .attr('data-index')
Ça paraît bizarre mais teste pour voir...

C'est assez bizarre, le .attr('data-index') renvoie undefined, le .index() renvoie une valeur mais pas la bonne...

En fait il semble que je confonde index() et data-index. Je renseigne data-index dans le lien <a>, et le code qui fonctionne sur les premières photos détecte le clic sur le <li>, récupère index() du li (qui n'est donc pas le data-index du <a> enfant) et effectue le traitement.
Ce qui veut dire que mon problème est le suivant : index() a une valeur pour les éléments chargé à l'initialisation de la page mais pas ceux ajouté par le scroll infini.

C'est ce que j'ai essayé cet après-midi.
Mais le code fonctionne avec l'index des li et non data-index des a, et ces index ne sont pas connus pour les éléments suivants. C'est un peu tordu comme système mais cela fonctionne bien sur d'autres pages du site pour d'autres galeries photos qui sont dans le dom, par contre celles que je veux générer en infinite scroll, nada.