I'm working on a tumblr theme where I'm trying to combine masonry with infinite scroll. Although masonry works, as soon as I add in infinite scrolling things start to break. The second page content is appearing behind the first page content, and when I click "Next Page" it's taking me to page 2 instead of loading the new elements at the bottom of page 1.
I've tried reading through the infinite scroll and masonry documentation, looking at similar questions on StackOverflow, and playing with my HTML structure and Javascript settings, but so far I've had no luck at all. Could someone possibly take a look at my code and let me know if I'm doing something wrong? What I want to happen is when the user clicks "Next page" the new elements from page 2 load at the bottom.
Here is my test tumblr url: http://masoninfinite.tumblr.com/ and here is a pastebin of my code: http://pastebin.com/KnbxNnES which I'll post below as well. I really appreciate any help I can get.
<html>
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/bpwficy/Ahjm97maz/masonry.js"></script>
<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
<script>
$(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.post',
columnWidth : 300,
gutterWidth: 30,
isAnimated: true
});
});
$container.infinitescroll({
navSelector : '.navigation', // selector for the paged navigation
nextSelector : '.nav-previous a', // selector for the NEXT link (to page 2)
itemSelector : '#container .post', // selector for all items you'll retrieve
},
// call Masonry as a callback
function( newElements ) {
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>
<style>
#container { border: 1px solid blue; width: 960px; margin: 0px auto; }
.post { margin-bottom: 20px; border: 1px solid red; width: 300px; background: #ccc; }
img { width: 200px; height: 200px; }
</style>
</head>
<body>
<h1>{Title}</h1>
{block:Description}
<p id="description">{Description}</p>
{/block:Description}
<div id="container">
<div class = "autopagerize_page_element" >
<ol id="posts">
{block:Posts}
{block:Text}
<li class="post text">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
{Body}
</li>
{/block:Text}
{block:Photo}
<li class="post photo">
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Photo}
{block:Photoset}
<li class="post photoset">
{Photoset-500}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Photoset}
{block:Quote}
<li class="post quote">
"{Quote}"
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</li>
{/block:Quote}
{block:Link}
<li class="post link">
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
</li>
{/block:Link}
{block:Chat}
<li class="post chat">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</li>
{/block:Chat}
{block:Video}
<li class="post video">
{Video-500}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Video}
{block:Audio}
<li class="post audio">
{AudioPlayerBlack}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Audio}
{/block:Posts}
</ol>
</div>
</div>
<p id="footer">
<div class="navigation">
{block:PreviousPage}
<a href="{PreviousPage}">« Previous</a>
{/block:PreviousPage}
{block:NextPage}
<div class="nav-previous">
<a href="{NextPage}">Next »</a>
</div>
{/block:NextPage}
</div>
<a href="/archive">Archive</a>
</p>
</body>
Figured out my issue and I'm about ready to slap myself in the face.
I was using some Tumblr specific infinite scroll code (http://codysherman.com/tools/infinite-scrolling/code) rather than the actual infinite scroll code from infinite-scroll.com.