I'm following another developer on a site and trying to speed it up. The functionality requires many entries to be displayed within a single document object. Previously, load times were abysmal so I've switched to pagination and I'm trying to implement infinite scroll to allow the rest of the pages to show in the same document object.
It seems as though every thing is working correctly until infinite scroll tries to load the new pages. Once you scroll to the bottom it tries to load something but says it cant.
What am I missing here? Code to set it up is:
<div id="timeline">
{exp:channel:entries channel="stories" orderby="story_year" dynamic="no" limit="20" paginate="bottom"}
<article class="largeArticle gold"> ...
</article>
{paginate}
{if next_page}
<div class="navigation">
<a href="{auto_path}" class="next">Show More</a>
</div>
{/if}
{/paginate}
{/exp:channel:entries}
</div>
And the javascript is:
<script type="text/javascript">
$(document).ready(function(){
$("#timeline").infinitescroll({
navSelevtor : ".navigation",
nextSelector : "a.next",
itemSelector : ".post",
extractLink: true,
});
});
</script>
You can see this in action at http://thinkx.net/clients/manship/index.php/timeline.
Thanks for your help, I'm really stuck here.