easyPaginate.JS

Introduction

jQuery.easyPaginate is a plugin to paginate pretty anything, like lists, links etc...
easyPaginate is pretty lightweight (10kb uncompressed), have some usefull options and is compatible with Chrome, Firefox, Opera and Safari.
I tried to make it simple to use and have some usefull options and hope it will be usefull to some people.

Getting Started

Download the code here (github repo)
Then, include jQuery and the jquery.easyPaginate.js code you just download into your page like this :

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.easyPaginate.js"></script>

HTML

Simple list of images

<div id="easyPaginate">
    <img src="img/demo/surf1.jpg" />
    <img src="img/demo/surf2.jpg" />
    <img src="img/demo/surf3.jpg" />
    <img src="img/demo/surf4.jpg" />
    <img src="img/demo/surf5.jpg" />
    <img src="img/demo/surf6.jpg" />
    <img src="img/demo/surf7.jpg" />
    <img src="img/demo/surf8.jpg" />
    <img src="img/demo/surf9.jpg" />
</div>

CSS

You only need css to personnalize the "Navigation Bar" on top. Anyway, here is a small exemple :

/* Cosmetic only */
#easyPaginate {width:300px;}
#easyPaginate img {display:block;margin-bottom:10px;}
.easyPaginateNav a {padding:5px;}
.easyPaginateNav a.current {font-weight:bold;text-decoration:underline;}

Javascript

$('#easyPaginate').easyPaginate({
	paginateElement: 'img',
	elementsPerPage: 3,
	effect: 'climb'
});

Demos

Basic exemple

Using the same code above

Options

Yeah cause it's easy, but there is some options to make it your own