0

I am creating a 3-column tumblr theme and trying to apply infinite scrolling and masonry to the posts. The masonry only applies on the number of 'Posts Per Page' (eg. if it's set to 15, masonry will only apply to the first 15 posts). I've looked everywhere but was unable to find anything. Here is my code: 

<script type="text/javascript" src="http://static.tumblr.com/imovwvl/rSGl20lfv/masonry.js"></script>

{block:IfInfiniteScroll}
<script type="text/javascript" src="http://proto.jp/js/tumblrAutoPager.js"></script>
{/block:IfInfiniteScroll}

<script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>

<script type="text/javascript">
$(window).load(function () {
$('#postCnts').masonry(),
$('.masonryWrap').infinitescroll({
navSelector : "div#pgNvgt",
// selector for the paged navigation (it will be hidden)
nextSelector : "div#pgNvgt a#nextPage",
// selector for the NEXT link (to page 2)
itemSelector : ".post",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 10,
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png",
loadingText : "<em></em>",
},
// call masonry as a callback.
function() { $('#postCnts').masonry({ appendedContent: $(this) }); }
);
});

</script>

Assistance would be very nice!

1 Answers1

0

You should upgrade to the latest version of the script (v2.1.05). You're using v 1.0.1.

Also you have two masonry.js files, you only need one.

I'd suggest using jqueryInfiniteScroll over tumblrAutoPager and the imagesLoaded plugin instead of $(window).load http://masonry.desandro.com/docs/help.html

Barbara
  • 12,908
  • 6
  • 32
  • 43