Search code examples
blogstumblrjquery-masonryinfinite-scroll

Infinite scroll script not working on tagged pages? [ Masonry ]


So, basically, I'm working on my first Tumblr theme here: teenaqe-vow.tumblr.com and everything is fine and dandy so far EXCEPT for the infinite scroll code. What happens is it works perfectly fine until you go to a tagged page like this one. http://teenaqe-vow.tumblr.com/tagged/music What happens is that when you scroll down, instead of loading the next page of the tagged pages, it loads a page from the index page. I'm using a script that keeps the posts all nestled together and renders the infinite scroll and without it there are gaps in the posts and it doesn't work out too well.

I'm really new with this whole thing so I'm kind of at a loss of how to fix it. I apologize if any of the information I provide is inadequate, please let me know if you need something more from me.

Here is the entire theme code: http://pastebin.com/X8DaLKPG

Here is the infinite scroll / masonry part:

{block:IndexPage}{block:IfTwoColumn}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

{block:IfInfiniteScroll}
<div id="pagination"><a href="/page/2"></a></div>
<script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script>
{/block:IfInfiniteScroll}

<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>

<script>
$(function(){
var $container = $('#content');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '#entry',
});
});
$container.infinitescroll({
itemSelector : "#entry",
navSelector : "#pagination",
nextSelector : "#pagination a",
loadingImg : "http://media.tumblr.com/ec1742dbca16ca94b47814f1de4e37e6/tumblr_inline_mj8pf7Te3l1qz4rgp.png",
loadingText : "<em></em>",
bufferPx : 10000,
extraScrollPx: 12000,
},
// trigger Masonry as a callback
function( newElements ) {
  var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>
{/block:IfTwoColumn}{/block:IndexPage}

Solution

  • Your pagination link is fixed on the main page (it always points to user.tumblr.com/page/2/). Use the Tumblr API pagination tools instead.