Pager

Description

Pager is a jQuery plugin to make Ajax pagination + history in ExpressionEngine a little easier (and nicer looking!).

Demo

Sorry, it's not a live demo, but the demo video should help you see what's going on here.

How to use

Example ExpressionEngine markup:

<section id="articles">
	{exp:channel:entries channel="news" limit="10" paginate="bottom" dynamic="no"}
		<article>
			<h2>{title}</h2>
			{content}
		</article>
		{paginate}
			{pagination_links}
				<ul class="pagination">
					{previous_page}
						<li><a href="{pagination_url}">&laquo;</a></li>
					{/previous_page}

					{page}
						<li{if current_page} class="active"{/if}><a href="{pagination_url}">{pagination_page_number}</a></li>
					{/page}

					{next_page}
						<li><a href="{pagination_url}">&raquo;</a></li>
					{/next_page}
				</ul>
			{/pagination_links}
		{/paginate}
	{/exp:channel:entries}
</section>

Add Pager Javascript (don't forget jQuery!) to document

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="hashchange.js"></script>
<script src="pager.js"></script>
<script src="index.js"></script>

Add Pager CSS for the kewl loading animation (all CSS-based, thanks to Dan Eden)

<link href="pager.css" rel="stylesheet">

Celebrate!

Options

The plugin comes with a nice set of options you can dabble with.

link:			'.pagination a',		// The anchor to your pagination links
pull:			'#articles > *',		// When your Ajax request occurs, the plugin pulls this DOM element out into the article wrapper
loaderID:		'loader',				// The ID of the loader element displayed when the Ajax request is initiated
scrollTo:		'body',					// Where the window scrolls after the next page successfully loads
fadeSpeed:		100,					// The fade speed on the loader animation and opacity changes for the article wrapper
fadeOpacity:	.5						// The opacity level on the article wrapper when the Ajax request is initiated

Notes

This has only really been tested with our standard ExpressionEngine pagination methods. Meaning, this may or may not work when using this with Wordpress or content management systems. Fork it and make it better! My jQuery skills are pretty n00bish.

Credits

Again, I'm a jQuery n00b. Much of this code was integrated, dissected, and taught to me via Design Aeon. The tutorial was very well documented, and it helped me further my jQuery knowledge for this.

A massive shoutout to the hashchange plugin for the Ajax history support.

Also, huge kudos to Dan Eden for his awesome CSS-based loader. You can thank him that "retina", "gif", and "extra http request" are no longer scary words.