jPaginator - Remylab
Description: Me : all about me

You like Javascript ?
Checkout this awesome T-Shirt ;-)
jPaginator is a jQuery plugin for pagination. It's fun, intuitive, it comes with a slider and you can ask for an unlimited number of pages. Use it with a unique element, for more details please have a look at the code of demo1 and the plugin's options. Don't forget the CSS page "jPaginator.css". Dependencies : jQuery 1.3.2+, jQuery UI Slider

Of course, you can achieve a much better design with some CSS skills, please have a look at this tutorial by Ian Yates from webdesign.tutsplus.com.

### Demo 1 : custom css

demo1

(the slider will disappear because the reset set nbPages to 20, nbVisible to 6, which mean 20/6 = 4 slides, or minSlidesForSlider = 5...)

### Demo 2 : constant speed, no slide

demo2

### Demo 3 : high number of pages, max acceleration

demo3

### Plugin's options (with default values) :

selectedPage: null,
Current page
nbPages: 100,
Total number of pages
nbVisible: 10,
Number of pages by slide
widthPx: 30,
Page-number width (px)
marginPx: 1,
Page-number margin (px)
overBtnLeft: null,
Element id of the over button left (move forward on mouseover)
overBtnRight: null,
Element id of the over button right (move backward on mouseover)
maxBtnLeft: null,
Element id of the max button left (go to first slide on click)
maxBtnRight: null,
Element id of the max button right (go to last slide on click)
withSlider: true,
Display slider (true/false),
withAcceleration: true,
Enable acceleration (true/false)
speed: 2,
Animation speed (1 to 5)
coeffAcceleration: 2,
Acceleration speed (1 to 5)
minSlidesForSlider: 3,
Minimum number of slides to display the slider. Ex : if nbPages=32 and nbVisible=10, 32/10 = 4 slides, so if minSlidesForSlider = 5 then slider won't be displayed.
onPageClicked: function(a,num) {}
Function called when a page number is clicked (where a = the root element of the paginator)

### Code of demo1

##### The Javascript :

    	$("#test1").jPaginator({
    	    nbPages:54,
    	    selectedPage:22,
    	    overBtnLeft:'#test1_o_left',
    	    overBtnRight:'#test1_o_right',
    	    maxBtnLeft:'#test1_m_left',
    	    maxBtnRight:'#test1_m_right',
    	    minSlidesForSlider:5,
    	    onPageClicked: function(a,num) {
    	        $("#page1").html("demo1 - page : "+num);
    	    }
    	});

    	// code for the reset button
    	$("#resetdemo1").click(function(){
    	    if ( !isNumeric($("#nbpages1").val()) ) return;

    	    $("#test1").trigger("reset",{
    	        selectedPage:null,
    	        nbVisible:6,
    	        nbPages:$("#nbpages1").val(),
    	        marginPx:8,
    	        speed:1
    	    });
    	});

##### The HTML :

    	<div id="test1">

    	    <!-- optional left control buttons -->
    	    <nav id="test1_m_left"></nav><nav id="test1_o_left"></nav>

    	    <div class='paginator_p_wrap'>
    	        <div class='paginator_p_bloc'>
    	            <!--<a class='paginator_p'></a> // page number : dynamically added -->
    	        </div>
    	    </div>

    	    <!-- optional right control buttons -->
    	    <nav id="test1_o_right"></nav><nav id="test1_m_right"></nav>

    	    <!-- slider -->
    	    <div class='paginator_slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all'>
    	        <a class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a>
    	    </div>

    	</div>