Masonry ne s'anime pas

Bonjour,

J'ai installé Masonry et l'animation qui est supposée apparaitre lorsqu'on resize la page ne fonctionne pas. Sinon tout fonctionne correctement.

En cherchant un peu sur le web, j'ai trouvé ce post sur stackoverflow qui propose de mettre le JQuery avant le script Masonry à la fin de la page index.html. Seulement pour moi ça ne fonctionne pas.

Voici à quoi ressemble le bas de ma page index.html :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
        
        <script src="js/jquery.masonry.js"></script>
        <script>
            
            var $grid = $('.grid').masonry({
	       // options...
	       itemSelector: '.grid-item',
	       isFitWidth: true,
	       columnWidth: 1
            });

            // layout Masonry after each image loads
            $grid.imagesLoaded().progress( function() {
            $grid.masonry('layout');
            });
            
        </script>

        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='//www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X','auto');ga('send','pageview');
        </script>

Merci d'avance pour votre aide !

Bonjour,

Déjà, la ligne <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script> me semble au mieux inutile puisque jquery est déjà chargé dans la page avant, voire nocive : insérer une balise <script> dans la page via un document.write() ne doit être qu'un dernier recours.

Ensuite, la première chose à faire est de vérifier que le script masonry.js est bien chargé dans ta page (déjà, est-il bien dans le répertoire js, et sous le nom jquery.mansonry.js ?). Pour tester ça, on peut par exemple à la ligne avant var $grid=... ajouter provisoirement la ligne :

if ($('.grid').masonry) alert("masonry is here!");

Si on voit passer une alerte avec "masonry is here!", alors masonry est probablement opérationnel.

Après ça, comme on n'a qu'une fraction du code, je ne vois pas trop comment aider. Il faudrait au moins un exemple minimal complet ne marchant pas.

Amicalement,
Modifié par parsimonhi (09 Jan 2018 - 19:16)