Pager is a jQuery plugin to make Ajax pagination + history in ExpressionEngine a little easier (and nicer looking!)
JavaScript
Switch branches/tags
Nothing to show
Latest commit 6fdb199 Feb 26, 2013 Aaron Bushnell Aaron Bushnell Merge pull request #1 from aaronbushnell/master
Add Ajax history
Permalink
Failed to load latest commit information.
README.md Add Ajax history Feb 26, 2013
hashchange.js Add Ajax history Feb 26, 2013
index.js Initial commit Jul 21, 2012
pager.css Initial commit Jul 21, 2012
pager.js Add Ajax history Feb 26, 2013

README.md

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.