2

I am trying to use David DeSandro's Masonry on my blog posts and I have an anoying issue where the containers overlap. As soon as I re-size my browser window, everything works fine:

<!--The code I placed in my template head section:-->
<script src='http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js'/>
<script src='http://masonry.desandro.com/masonry.pkgd.min.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script>
$(document).ready(function(){
    var $container = $(&#39;AJcontainer&#39;);
        $container.imagesLoaded( function() {
        $container.masonry({
            itemSelector: &#39;AJpost&#39;,
            });
    });
    });
</script>
</b:if>



<!--The code in my posts:-->
<div class="js-masonry" id="AJpost">
<div class="AJcontainer"><a href="*.jpg">
<img src="*.jpg" />
<div class="AJsumm">(...)</div></a>
</div>

I have searched for a solution in the past few days with no success: imagesLoaded does not seem to work, (window).load instead of (document).ready is not working either

This is the work in progress website: http://infinitywashere.blogspot.co.uk/2014/04/sketches-again.html

Any help would be very much appreciated!

Filipe.Fonseca
  • 321
  • 2
  • 14
Jam.d
  • 23
  • 3

1 Answers1

3

Maybe problem with the JQuery syntax, try this:

$(window).load(function(){
    var $container = $('#AJpost');
    $container.imagesLoaded( function() {
        $container.masonry({
            itemSelector: '.AJcontainer'
        });
    });
});

Have a try without imagesLoaded:

$(window).load(function() {  
    var $container = $('#AJpost');
    $container.masonry({
        itemSelector: '.AJcontainer'
    });
});
jjj
  • 965
  • 8
  • 23
  • Thank you Jerome, unfortunately still no success. Is there an easy way to check if imagesLoaded is working (ie show a pop up? or similar) – Jam.d Apr 15 '14 at 17:48
  • Well... what is the result without the use of imagesLoaded? – jjj Apr 15 '14 at 18:06
  • That's exactly what i was testing - I deleted the imagesLoaded and the result is identical - so I figured it must be an issue with imagesLoaded not working properly? any idea why this might happen? – Jam.d Apr 15 '14 at 18:19
  • I'm glad to have helped. – jjj Apr 15 '14 at 19:55
  • 1
    This worked for me as well. I removed the initial imagesLoaded from the first masonry call, but then re-initialized imagesLoaded in the final infinite-scroll callback. – sternmd Apr 12 '19 at 20:28