john-henry/gist:3179683

## gistfile1.html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

 <title></title>
 <meta name="description" content="">
 <meta name="author" content="">

 <meta name="viewport" content="width=device-width,initial-scale=1">


</head>
<body>
<div class="container">
{exp:channel:entries channel="articles" dynamic="no" orderby="date" sort="asc" status="not closed" paginate="bottom" limit="12"}
	<div class="article">
	<h2>{entry_id} - {title} </h2>
	<p>{article_summary}</p>
	</div>
	{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}
</div>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    	<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script>

    	<!-- <script src="/assets/js/jquery.masonry.min.js" type="text/javascript"></script> -->


    	<script src="/assets/js/jquery.infinitescroll.js" type="text/javascript"></script>
    	<!--   Use forked Version availabe here : https://github.com/DeadCat/infinite-scroll/  	 -->
<script>

var $wall = $('.container');
//Masonry -  Uncomment for use
	/*
$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!",
			img: "/assets/img/ajax-loader.gif",
			msgText: "<em>Loading articles...</em>"
		},
		animate      : true,
		extraScrollPx: 150,
		extractLink: true,

    pathParse: function() {
        return ['http://ws-expressionengine:8888/articles/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  -  Uncomment for use
		/*
function( newElements ) {
			 var $newElems = $( newElements );
			$(this).masonry( 'appended', $newElems );
		}
*/
	);

	</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title></title>
	<meta name="description" content="">
	<meta name="author" content="">

	<meta name="viewport" content="width=device-width,initial-scale=1">


	</head>
	<body>
	<div class="container">
	{exp:channel:entries channel="articles" dynamic="no" orderby="date" sort="asc" status="not closed" paginate="bottom" limit="12"}
	<div class="article">
	<h2>{entry_id} - {title} </h2>
	<p>{article_summary}</p>
	</div>
	{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}
	</div>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script>window.jQuery \|\| document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script>

	<!-- <script src="/assets/js/jquery.masonry.min.js" type="text/javascript"></script> -->


	<script src="/assets/js/jquery.infinitescroll.js" type="text/javascript"></script>
	<!-- Use forked Version availabe here : https://github.com/DeadCat/infinite-scroll/ -->
	<script>

	var $wall = $('.container');
	//Masonry - Uncomment for use
	/*
	$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!",
	img: "/assets/img/ajax-loader.gif",
	msgText: "<em>Loading articles...</em>"
	},
	animate : true,
	extraScrollPx: 150,
	extractLink: true,

	pathParse: function() {
	return ['http://ws-expressionengine:8888/articles/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 - Uncomment for use
	/*
	function( newElements ) {
	var $newElems = $( newElements );
	$(this).masonry( 'appended', $newElems );
	}
	*/
	);

	</script>
	</body>
	</html>