jPages

Options

containerID String

Default value: Required! (No default)

The ID of the container of the items you want to paginate. It can be an UL, OL, DIV etc.

first String || false

Default value: false

In this parameter you can customize the button for the first page in the navigation. By default this parameter is set to false so the 'first' button won't be created.

To set the name for this button you just have to pass it as a string. View example.

In case you want to use a custom element instead of the auto generated one, you can pass the selector for that element. View example.

previous String || false

Default value: "← previous"

Same as the parameter 'first' but for the button 'previous'.

next String || false

Default value: "next →"

Same as the parameter 'first' but for the button 'next'.

last String || false

Default value: false

Same as the parameter 'first' but for the button 'last'.

startPage Integer

Default value: 1

The page you want to be displayed first when the plugin is applied.

perPage Integer

Default value: 10

Number of items to be displayed per page. View example.

midRange Integer

Default value: 5

Number of page links to display at one time i.e. let's say you have a total of 50 pages, instead of displaying links to each and every page, we display a range of pages around the current page that we're on.

Just a note, the mid range value should be an odd number so the display is symmetrical, but it can also be even if you like.

startRange Integer

Default value: 1

Number of page links always visible at the beggining of the nav. For instance, if you set startRange to 3, page links 1, 2 and 3 will allways be visible no matter which is the current page.

endRange Integer

Default value: 1

Number of page links always visible at the end of the nav.

keyBrowse Boolean

Default value: false

If you set keyBrowse to true you can browse the pages using your keyboard left and right keys. View example.

scrollBrowse Boolean

Default value: false

If you set scrollBrowse to true when you hover the cursor over the items you can use the scroll wheel to browse between pages. View example.

pause Integer

Default value: 0

If you want the plugin to automatically rotate the "pages", with this parameter you can control the length of the pause between each "page turn" in milliseconds.

When pause is set to false or 0 (default), pages won't automatically rotate. View an example of the auto rotation here.

clickStop Boolean

Default value: true

If you activated page rotation by setting a pause value, you can stop auto page turn when user clicks on a navigation link for the first time by setting clickStop to true.

Set it to false if you want pages to keep turning. View example.

delay Integer

Default value: 50

If you want page items to be displayed one by one, you can control the delay between item display with this parameter (in milliseconds). If you don't set any value or set it to 0, items will be displayed all at the same time.

direction String

Default value: "forward"

If you set a delay time between each item display you can also choose in what direction will they appear.

The options are: "forward", "backwards", "auto" or "random". View example.

animation String

Default value: empty string (No CSS3 animation)

jPages works perfectly with Animate.css but you must of course add the link to this CSS3 library in the head of your page first. Once you've done that, you can choose any of the entrance animations - jPages only supports entrance animations. View example.

If you don't set any animation or if the browser doesn't support CSS3 Animations, jPages will fallback to the jQuery fadeIn effect. You can customize the speed of this effect in the parameter "fallback".

fallback Integer

Default value: 400

If you don't set a CSS3 animation in the parameter "animation" jPages will fallback to the jQuery fadeIn effect. You can costumize the fadeIn speed in this parameter. You can use milliseconds or the strings 'fast', 'slow' and 'normal'. View example.

minHeight Boolean

Default value: true

When a page turn occurs, some items will be hidden and some others will be shown. If you don't set a minimum height for the container you might perceive some height collapsing every time you turn pages. If you set minHeight to true, it will automatically set a minimum height for the item container to fix this issue. Set minHeight to false if you want to style this property yourself.

callback function

Default value: function( pages, items ) {}

In this parameter you can pass a function that will run after every page turn. This function receives two arguments (objects) that contain all the information available about the pages and the items:

Pages object properties:

pages.current

current page number

pages.interval

an object that contains two properties - interval.start and interval.end - corresponding to the midRange edges of pages in the navigation.

pages.count

total number of pages

Items object properties:

items.showing

jQuery collection of the items currentely being displayed

items.oncomming

jQuery collection of the items in the next page

items.range

an object that contains two properties - range.start and range.end - corresponding to the range of items currentely being displayed.

items.count

total number of items

See how to create a legend for your pagination here.

API

Jump to page

After initiating the plugin you can at any time show a specific page to your users. View example.

Destroy

After initiating the plugin you can destroy it. View example.