Rechargement de Masonry.js après un a.load qui change le contenu

Alexandre Marie
Javascript

Bonjour,
Je suis novice en js et je bloque un peu sur le problème suivant.<br>
J'ai un micro menu avec 2 liens qui changent le contenu de ma div appelé container.
Cette div contient des images qui sont rangé grâce à Masonry.js mais quand je click et que mes images changent elles ne sont plus rangées par Masonry.
Alors j'ai essayé d'ajouter un masonry('reload') comme indiqué ci-dessous mais pas de rechargement donc pas de rangement des images.

$(document).ready(function(){
    $("a.load").click(function(){
        $('#container').load(this.href);
        return false;
        $('#container').masonry('reload');
    });
});

Si vous aviez une petite idée pour m'aider j'en serai très heureux.

Merci

7 réponses

Grafikart
Réponse acceptée

Relancer l'organisation après que le contenu soit chargé

$(document).ready(function(){
    $("a.load").click(function(){
        $('#container').load(this.href, function(){
          // Ce code se lancera à la fin du chargement
           $('#container').masonry('reload');
        });
        return false;
    });
});
Alexandre Marie
Auteur
Réponse acceptée

Merci pour votre aide,
J'ai trouvé ma solution en ajoutant une nouvel div qui englobe toutes mes images et en chargeant masonry de la manière expliqué ci-dessus.

Ce qui donne :

$(document).ready(function(){
    $("a.load").click(function(){
        $('#container').load(this.href, function(){
            $('#cont').masonry({
                     "itemSelector": ".item",
                     "columnWidth": ".grid-sizer",
                         });
                });
        return false;
    });
});

Merci beaucoup Grafikart pour la syntaxe.

Bon weekend.

Romano83

Il faut que tu utilises l'option layout de Masonry :

$(document).ready(function(){
    $("a.load").click(function(){
        $('#container').load(this.href);
        return false;
        $('#container').masonry('layout');
    });
});
Alexandre Marie
Auteur

J'ai un nouveau petit souci avec cette même fonction.

Quand je clic sur mon lien il m'affiche bien les images mais il me les superpose et dès que je redimensionne ou reclic sur le lien ca fonctionne correctement.

Je pense qu'il doit y avoir un moyen simple, peut-être faire croire au navigateur qu'il a changé de dimension ou une fonction de masonry.

Une petite image pour vous expliquer :
la première quand je clic pour la 1ère fois sur le lien et la suivante quand je reclic ou redimensionne la page.

http://alaix.fr/img/S1.png

Romano83

Il faut que tu regardes du côté de ImageLoadéd dans la doc de masonry.
Ca permet d'éviter la superposition d'images.

Alexandre Marie
Auteur

Merci pour le imageLoaded je l'avais pas vu.
J'ai pas encore trouvé le bonne endroit où l'insérer.
J'ai essayer en mettant comme ceci :

$(document).ready(function(){
    $("a.load").click(function() {
        $('#container').load(this.href,
                             function(){$('#cont').masonry({"itemSelector": ".item","columnWidth": ".grid-sizer"})}, 
                             function(){$('#cont').imagesloaded(function(){ $('#cont').masonry('reload');})}
                                           );
                              return false;
                              });
                           });

ou en dehors

$('#cont').imagesloaded(function(){
        $('#cont').masonry();
});

Je ne vois plus trop, peut-être une erreur de syntaxe ou d'emplacement...

Merci d'avance.

Romano83

Salut,
il faut que tu le mette avant d'appeler masonry. Regarde au niveau de la doc, c'est très bien expliqué ;)