<|start_filename|>demo/index.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>easyPaginate :: Easiest way to paginate anything :: powered by jQuery</title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/jquery.snippet.min.css" rel="stylesheet">
		<link href="css/styles.css" rel="stylesheet">
	</head>
	<body data-spy="scroll" data-target=".navbar" data-offset="150">
		<div id="wrapper" class="span10">
			<header>
				<h1>easyPaginate.JS</h1>
				<p class="lead muted">jQuery plugin to paginate anything in no time</p>
			</header>

			<div id="navbar" class="row">
				<div class="navbar span10">
					<div class="navbar-inner">
						<ul class="nav">
							<li class="active"><a href="#intro">Intro</a></li>
							<li><a href="#gettingstarted">Getting Started</a></li>
							<li><a href="#html">HTML</a></li>
							<li><a href="#css">CSS</a></li>
							<li><a href="#javascript">Javascript</a></li>
							<li><a href="#demos">Demos</a></li>
							<li><a href="#options">Options</a></li>							
							<li><a href="https://github.com/st3ph/jquery.easyPaginate"><span class="badge badge-success">Download</span></a></li>
						</ul>
					</div>
				</div>
			</div>

			<section id="intro">
				<h2>Introduction</h2>
				<p class="well">
					jQuery.easyPaginate is a plugin to paginate pretty anything, like lists, links etc...<br />
					easyPaginate is pretty lightweight (10kb uncompressed), have some usefull options and is compatible with <img src="img/chrome-16.png" alt="Chrome" /> Chrome, <img src="img/firefox-16.png" alt="Firefox" /> Firefox, <img src="img/opera-16.png" alt="Opera" /> Opera and <img src="img/safari-16.png" alt="Safari" /> Safari.<br />
					I tried to make it simple to use and have some usefull options and hope it will be usefull to some people.
				</p>
			</section>

			<section id="gettingstarted">
				<h2>Getting Started</h2>
				<p class="well">
					Download the code <a href="https://github.com/st3ph/jquery.easyPaginate">here <i class="icon-download-alt"></i></a> (github repo)</br />
					Then, include <a href="http://jquery.com/download">jQuery</a> and the jquery.easyPaginate.js code you just download into your page like this :
				</p>
<pre class="html">
&lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;script src="jquery.easyPaginate.js">&lt;/script&gt;
</pre>
			</section>

			<section id="html">
				<h2>HTML</h2>
				<p class="well">
					Simple list of images
				</p>
<pre class="html">
&lt;div id="easyPaginate"&gt;
    &lt;img src="img/demo/surf1.jpg" /&gt;
    &lt;img src="img/demo/surf2.jpg" /&gt;
    &lt;img src="img/demo/surf3.jpg" /&gt;
    &lt;img src="img/demo/surf4.jpg" /&gt;
    &lt;img src="img/demo/surf5.jpg" /&gt;
    &lt;img src="img/demo/surf6.jpg" /&gt;
    &lt;img src="img/demo/surf7.jpg" /&gt;
    &lt;img src="img/demo/surf8.jpg" /&gt;
    &lt;img src="img/demo/surf9.jpg" /&gt;
&lt;/div&gt;
</pre>
			</section>

			<section id="css">
				<h2>CSS</h2>
				<p class="well">
					You only need css to personnalize the "Navigation Bar" on top. Anyway, here is a small exemple :
				</p>
<pre class="css">
/* 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;}
</pre>
			</section>

			<section id="javascript">
				<h2>Javascript</h2>
<pre class="javascript">
$('#easyPaginate').easyPaginate({
	paginateElement: 'img',
	elementsPerPage: 3,
	effect: 'climb'
});
</pre>
			</section>

			<section id="demos">
				<h2>Demos</h2>

				<h3>Basic exemple</h3>
				<p class="well">
					Using the same code above
				</p>
				<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>
			</section>

			<section id="options">
				<h2>Options</h2>
				<p class="well">
					Yeah cause it's easy, but there is some options to make it your own
				</p>
				<table class="table">
					<thead>
						<th>Option</th>
						<th>Type</th>
						<th>Description</th>
					</thead>
					<tbody>
						<tr>
							<td>paginateElement</td>
							<td class="muted">string</td>
							<td>element to paginate (default : 'li')</td>
						</tr>
						<tr>
							<td>hashPage</td>
							<td class="muted">string</td>
							<td>hash name to directly load this "page" on the pagination. For exemple try to load this demo with <a href="#page:2" target="_blank">#page:2</a> at the end of the url :) (default : 'page')</td>
						</tr>
						<tr>
							<td>elementsPerPage</td>
							<td class="muted">integer</td>
							<td>number of elements per page (default : 10)</td>
						</tr>
						<tr>
							<td>effect</td>
							<td class="muted">string</td>
							<td>
								effect to use (default : 'default')<br />
								can be : 'default', 'fade', 'slide', 'climb'
							</td>
						</tr>
						<tr>
							<td>slideOffset</td>
							<td class="muted">integer</td>
							<td>offset in pixels for the animation (default : 200)</td>
						</tr>
						<tr>
							<td>firstButton</td>
							<td class="muted">boolean</td>
							<td>false to disable first button in nav (default : true)</td>
						</tr>
						<tr>
							<td>firstButtonText</td>
							<td class="muted">string</td>
							<td>text of the first button in nav (default : '<<')</td>
						</tr>
						<tr>
							<td>lastButton</td>
							<td class="muted">boolean</td>
							<td>false to disable last button in nav (default : true)</td>
						</tr>
						<tr>
							<td>lastButtonText</td>
							<td class="muted">string</td>
							<td>text of the last button in nav (default : '>>')</td>
						</tr>
						<tr>
							<td>prevButton</td>
							<td class="muted">boolean</td>
							<td>false to disable previous button in nav (default : 'true)</td>
						</tr>
						<tr>
							<td>prevButtonText</td>
							<td class="muted">string</td>
							<td>text for the previous button in nav (default : '<')</td>
						</tr>
						<tr>
							<td>nextButton</td>
							<td class="muted">boolean</td>
							<td>false to disable next button in nav (default : true)</td>
						</tr>
						<tr>
							<td>nextButtonText</td>
							<td class="muted">string</td>
							<td>text for the next button in nav (default : '>')</td>
						</tr>
					</tbody>
				</table>
			</section>
		</div>

		<footer>
			Developed and maintained by <a href="http://www.stephane-litou.com" title="<NAME> - Lead dev">St&eacute;<NAME></a>
		</footer>

		<a href="https://github.com/st3ph/jquery.easyPaginate"><img style="position: fixed; top: 0; right: 0; border: 0; z-index: 9999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/jquery.snippet.min.js"></script>
		<script src="../lib/jquery.easyPaginate.js"></script>
		<script src="js/scripts.js"></script>
	</body>
</html>

<|start_filename|>demo/js/scripts.js<|end_filename|>
$(function() {
	$('#navbar').affix({
		offset: {
			top: 200
		}
	});

	$("pre.html").snippet("html", {style:'matlab'});
	$("pre.css").snippet("css", {style:'matlab'});
	$("pre.javascript").snippet("javascript", {style:'matlab'});

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