0

I'm building a multi page site, and really love the page transition effect that the plugin Animsition allows. However on a page I used the jquery Masonry plugin. When I first open this page the layout is fine, but when I navigate to other pages of the site and return to the one that's using Masonry the layout is broken. Can anyone help... please

John Slegers
  • 38,420
  • 17
  • 182
  • 152
Sandra Antunes
  • 13
  • 2
  • Please provide your code and a jsfiddle. How can we possibly help without knowing anything about your code? – Macsupport Jul 18 '15 at 13:50
  • you can see what I mean by following this test link: http://webdpix.com/citycos/funcionamento.html – Sandra Antunes Jul 18 '15 at 14:28
  • Actually It is not apparent. What pages are you specifically having issues with? You need to be more specific in your question and description. – Macsupport Jul 19 '15 at 00:41
  • When I open http://webdpix.com/citycos/funcionamento.html the layout is fine. When I navigate to other pages, and open again funcionamento.html the layout where I call masonry, becomes broken. – Sandra Antunes Jul 19 '15 at 23:30

1 Answers1

1

You need to use imagesloaded.js which will make all images load before masonry is called. Load it in your page and then call masonry like this:

 $(function () {
 $('.grid').imagesLoaded( function() {
    $('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: 300,
    gutter: 20  
        });
    });
 });

Also, a separate issue, "js/jquery.scrollToTop.min.js" is not loaded.

Macsupport
  • 5,144
  • 3
  • 24
  • 41