CODEWITHSUNDEEP
javascripttumblrmasonry
bella
bella

Reputation: 1

Overlapping Images with Masonry

I can't seem to get this to work. Trying to get a tumblr theme to look nice but for some reason, other photos always load overlapping the vertical photosets. I think that this is because masonry hasn't finished loading the vertical photoset because it loads the next one or something... I can't for the life of me fix it (not too experienced with jQuery) but I want to learn so if someone could help me out and/or point me in the right direction, I would appreciate it! I've tried Googling this and I've found a few answers but for some reason they don't really help me, I still have the problem. Here's what I have in my theme: 

<script type="text/javascript" src="http://static.tumblr.com/bswe8t6/UFVlryaq2/jquerymsnryv2.js"></script>


<script type="text/javascript">

  $(window).load(function(){
    var $wall = $('#posts');
    $wall.imagesLoaded(function(){
      $wall.masonry({
        itemSelector: '#entry, #entry_photo',
        isAnimated : false
      });
    });

    $wall.infinitescroll({
      navSelector    : '#page-nav',  
      nextSelector   : '#page-nav a',
      itemSelector   : '#entry, #entry_photo',
      bufferPx       : 2000,
      debug          : false,
      errorCallback: function() {
        $('#infscr-loading').fadeOut('normal');  
      }},
      function( newElements ) {
        var $newElems = $( newElements );
                $newElems.hide();
        $newElems.imagesLoaded(function(){
          $wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
        });
      }); $('#content').show(500);

  });



</script>

Ends up looking like this. See there's a red-looking photo underneath the green one?

Upvotes: 0

Views: 55

Answers (1)

chloe784
chloe784

Reputation: 609

Masonry and tumblr's native photosets don't work well together. The photosets load as iframes and masonry can't work out the height and set aside enough space for them.

Instead you will need to use something like Pixel Union photosets (tutorial).

Upvotes: 1

Related Questions