Css Globe CSS and Web Design News

Today I am presenting a simple jQuery plugin I made. This plugin allows you to browse easily through the list of items with pagination controls. It is very easy to implement and very lightweight so it might come in handy to use in your own projects. It's main purpose is to view certain number of list items at once, but it can also be set up to view one item by one.

Simple demo Styled demo Auto pagination Download the plugin

How does it work?

The plugin takes a list of items, calculates a number of child elements of a certain object, divides it by step parameter (which can be easily adjusted) and generates "control buttons". Controls are inserted immediately after the selected object in a form of ordered list.

For target object I recommend using unordered list, although plugin will work with any other type of element that contains any type of child elements. If you want to have it set up that way, child elements can be of a different type!

To apply this plugin you will of course need to link to jQuery library and the plugin js file:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script type="text/javascript" src="js/easypaginate.js"></script>

You will need to initiate the plugin:

<script type="text/javascript">
  
  jQuery(function($){ 
  $('ul#items').easyPaginate();
  }); 
  
</script>

This is the source code for the target object I am using in my example:

<ul id="items">
  <li>Page 1</li>
  <li>Page 2</li>
  <li>Page 3</li>
  <li>Page 4</li>
  <li>Page 5</li>
  <li>Page 6</li>
  <li>Page 7</li>
  <li>Page 8</li>
  <li>Page 9</li>
  <li>Page 10</li>
  <li>Page 11</li>
  <li>Page 12</li>
  <li>Page 13</li>
  <li>Page 14</li>
</ul>

This is the generated source code for control buttons (inserted immediately after the target element):

<ol id="pagination">
  <li class="prev">Previous</li>
  <li class="current" data-index="1">1</li>
  <li data-index="2">2</li>
  <li data-index="3">3</li>
  <li data-index="4">4</li>
  <li class="next">Next</li>
</ol>

Options

There are several options you can modify. First and most important is the step parameter. Step parameter defines how many child items will be visible at a time. It is also used in calculating of number of pages. By default this parameter is set to 4. To use your own step value, change the step parameter:

jQuery(function($){
  
  $('ul#items').easyPaginate({
  step:3
  });
  
}); 

Here's the full list of available options:

step

Default value: 4
Defines a number of items visible on each "page".

delay

Default value: 100
Items on each "page" fade in one by one. This parameter controls the pause between each item's appearance so we can create "wave" effect. It is defined in milliseconds.

numeric

Default value: true
Boolean. If set to true then the numeric pagination buttons will show.

nextprev

Default value: true
Boolean. If set to true then the next and previous pagination buttons will show.

auto

Default value: false
Boolean. If set to true then the plugin will automatically rotate the "pages"

pause

Default value: 4000
If set to auto pagination, this parameter controls the length of the pause in milliseconds between each "page turn".

clickstop

Default value: true
If set to auto pagination, this parameter controls whether the pages will continue to automatically rotate. If you want to continue the rotation set this parameter to false.

controls

Default value: 'pagination'
As mentioned, the plugin generates an ordered list for the purpose of navigating through "pages". This parameter defines the list's ID.

current

Default value: 'current'
This parameter defines a class name of a current "page" in the numeric navigation. It is used for styling purposes.

If you want to create multiple paginations on the same page, have in mind that this plugin uses IDs to target control buttons so you need to define control id parameter for each pagination.

Enjoy! ;)