Easy Paginate

HTML

<div id="container">

<h1>Easy Paginate</h1>
<p>Click on the links below to navigate through items</p>    
		
<ul id="items">
    <li>
    	<p class="image"><a href="http://templatica.com"><img src="http://cssglobe.com/lab/easypaginate//images/01.jpg" alt="Template preview" /></a></p>
    	<h3>Template 01</h3>
    	<p class="info">Pretty cool template</p>
    </li>
    
    <li>
    	<p class="image"><a href="http://templatica.com"><img src="http://cssglobe.com/lab/easypaginate//images/02.jpg" alt="Template preview" /></a></p>
    	<h3>Template 02</h3>
    	<p class="info">Pretty cool template</p>
    </li>
    
    <li>
    	<p class="image"><a href="http://templatica.com"><img src="http://cssglobe.com/lab/easypaginate//images/03.jpg" alt="Template preview" /></a></p>
    	<h3>Template 03</h3>
    	<p class="info">Pretty cool template</p>
    </li>
    
    <li>
    	<p class="image"><a href="http://templatica.com"><img src="http://cssglobe.com/lab/easypaginate//images/03.jpg" alt="Template preview" /></a></p>
    	<h3>Template 04</h3>
    	<p class="info">Pretty cool template</p>
    </li>
    
    <li>
    	<p class="image"><a href="http://templatica.com"><img src="http://cssglobe.com/lab/easypaginate//images/05.jpg" alt="Template preview" /></a></p>
    	<h3>Template 05</h3>
    	<p class="info">Pretty cool template</p>
    </li>
    
    <li>
    	<p class="image"><a href="http://templatica.com"><img src="http://cssglobe.com/lab/easypaginate//images/06.jpg" alt="Template preview" /></a></p>
    	<h3>Template 06</h3>
    	<p class="info">Pretty cool template</p>
    </li>
    
    <li>
    	<p class="image"><a href="http://templatica.com"><img src="http://cssglobe.com/lab/easypaginate//images/07.jpg" alt="Template preview" /></a></p>
    	<h3>Template 07</h3>
    	<p class="info">Pretty cool template</p>
    </li>
    
    <li>
    	<p class="image"><a href="http://templatica.com"><img src="http://cssglobe.com/lab/easypaginate//images/08.jpg" alt="Template...

CSS

/* HTML elements  */		

	html,body{margin:0;padding:0;}
	h1, h2, h3, h4, h5, h6{
		font-weight:normal;
		margin:0;
		line-height:1em;
		}	
	h1{font-size:2em;margin-bottom:.5em;}	
	h2{font-size:1.75em;margin-bottom:.5142em;padding-top:.2em;}	
	h3{font-size:1.5em;margin-bottom:.7em;padding-top:.3em;}
	h4{font-size:1.25em;margin-bottom:.6em;}
	h5,h6{font-size:1em;margin-bottom:.5em;font-weight:bold;}
	
	p, blockquote, ul, ol, dl, form, table, pre{line-height:inherit;margin:0 0 1.5em 0;}
	ul, ol, dl{padding:0;}
	ul ul, ul ol, ol ol, ol ul, dd{margin:0;}
	li{margin:0 0 0 2em;padding:0;display:list-item;list-style-position:outside;}	
	blockquote, dd{padding:0 0 0 2em;}
	pre, code, samp, kbd, var{font:100% mono-space,monospace;}
	pre{overflow:auto;}
	abbr, acronym{
		text-transform:uppercase;
		border-bottom:1px dotted #000;
		letter-spacing:1px;
		}
	abbr[title], acronym[title]{cursor:help;}
	small{font-size:.9em;}
	sup, sub{font-size:.8em;}
	em, cite, q{font-style:italic;}
	img{border:none;}			
	hr{display:none;}	
	table{width:100%;border-collapse:collapse;}
	th,caption{text-align:left;}
	form div{margin:.5em 0;clear:both;}
	label{display:block;}
	fieldset{margin:0;padding:0;border:none;}
	legend{font-weight:bold;}
	input[type="radio"],input[type="checkbox"], .radio, .checkbox{margin:0 .25em 0 0;}

/* //  HTML elements */	

/* base */
	
	body, table, input, textarea, select, li, button{
		font:1em Helvetica, Arial, Sans-Serif;
		line-height:1.5em;
		color:#333;
		}		
	body{
		font-size:12px;
		background:#fff;
		margin:0;
		padding:20px;		
		}	
	a, a:visited{
		text-decoration:none;
		color:#06C;
		}
	a:hover{color:#999;}

/* base */

/* content */

	#container{	
		margin:0 auto;
		width:818px;
		text-align:left;
		position:relative;
		padding:2em 0;
		}
		
	ul#items{		
		margin:1em 0;
		width:auto;
		height:245px;
		overflow:hidden;
		}
	ul#items li{
		list-style:none;
		float:left;
		height:240px;
		overflow:hidden;
		margin:0...

JavaScript

(function($) {
		  
	$.fn.easyPaginate = function(options){

		var defaults = {				
			step: 4,
			delay: 100,
			numeric: true,
			nextprev: true,
			auto:false,
			loop:false,
			pause:4000,
			clickstop:true,
			controls: 'pagination',
			current: 'current',
			randomstart: false
		}; 
		
		var options = $.extend(defaults, options); 
		var step = options.step;
		var lower, upper;
		var children = $(this).children();
		var count = children.length;
		var obj, next, prev;		
		var pages = Math.floor(count/step);
		var page = (options.randomstart) ? Math.floor(Math.random()*pages)+1 : 1;
		var timeout;
		var clicked = false;
		
		function show(){
			clearTimeout(timeout);
			lower = ((page-1) * step);
			upper = lower+step;
			$(children).each(function(i){
				var child = $(this);
				child.hide();
				if(i>=lower && i<upper){ setTimeout(function(){ child.fadeIn('fast') }, ( i-( Math.floor(i/step) * step) )*options.delay ); }
				if(options.nextprev){
					if(upper >= count) { next.fadeOut('fast'); } else { next.fadeIn('fast'); };
					if(lower >= 1) { prev.fadeIn('fast'); } else { prev.fadeOut('fast'); };
				};
			});	
			$('li','#'+ options.controls).removeClass(options.current);
			$('li[data-index="'+page+'"]','#'+ options.controls).addClass(options.current);
			
			if(options.auto){
				if(options.clickstop && clicked){}else{ timeout = setTimeout(auto,options.pause); };
			};
		};
		
		function auto(){
			if(options.loop) if(upper >= count){ page=0; show(); }
			if(upper < count){ page++; show(); }				
		};
		
		this.each(function(){ 
			
			obj = this;
			
			if(count>step){
								
				if((count/step) > pages) pages++;
				
				var ol = $('<ol id="'+ options.controls +'"></ol>').insertAfter(obj);
				
				if(options.nextprev){
					prev = $('<li class="prev">Previous</li>')
						.hide()
						.appendTo(ol)
						.click(function(){
							clicked = true;
							page--;
							show();
						});
				};
				
				if(options.numeric){
					for(var...