Infite Scroll Demo

infite-scroll.js

/*
<section>
				{exp:channel:entries channel="articles" dynamic="no" status="not closed" paginate="bottom" limit="12"}
					<article>
						<header>
							<h1>{title} </h1>
						</header>
					</article>
					
					{paginate}
					<div class="pagination">
					{pagination_links}
						{previous_page}
                        <a href="{pagination_url}" class="newer">Previous Page</a>
						{/previous_page}
                 		{next_page}
                        <a href="{pagination_url}" class="older">Next Page</a>
                		{/next_page}
					{/pagination_links}
					</div>
    				{/paginate}
				{/exp:channel:entries}
				 
</section>
*/

var $wall = $('section');
//Masonry
	$wall.masonry({
		columnWidth: 340,
		gutterWidth:0,
		isAnimated : true,
		resizeable: true,
		itemSelector : 'article'
	});
//Infinite scroll
	$wall.infinitescroll({
		navSelector  : 'div.pagination', 
		nextSelector : 'div.pagination a.older',
		itemSelector : 'article',
		loading: {
			finishedMsg: "End of the line fucker",
			img: "/assets/img/ajax-loader.gif",
			msgText: "<em>Loading articles...</em>"
		},
		animate      : true, 
		extraScrollPx: 150, 
		extractLink: true,
		 state: {
        currPage: 5
    },
    pathParse: function() {
        return ['http://johnhenry.ie/P','']
    },
		debug: true,
		errorCallback: function() { 
			// fade out the error message after 2 seconds
			$('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');   
		}
		},
		// call masonry as a callback
		function( newElements ) {
			 var $newElems = $( newElements ); 
			$(this).masonry( 'appended', $newElems );
		}
	);
	/* $('p.pastOrFuture.list').hide(); */