What?

Flexipage is a jQuery plugin for paginate any HTML content. Inspired in Quick Paginate plugin.

Usage

To use the flexipage plugin, include jQuery and jquery.flexipage inside the <head> tag of your document: 

<script src="javascripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="javascripts/jquery.flexipage.js" type="text/javascript"></script>

Then write some HTML like this:

<div>
  <ul class="fp-example">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    ...
    <li>Item 22</li>
    <li>Item 23</li>
    <li>Item 24</li>
    <li>Item 25</li>
  </ul>
</div>

And start flexipage

$('.fp-example').flexipage();

You can also pass in configuration options when you initialize the pagination, for example:

$('.fp-example').flexipage({
    element:'a',
    perpage:1,
    carousel: true,
    navigation: true,
    pager: false
});

Configuration

Property Type Default Description
element string 'li' Indicates the element you want to paginate
pager boolean true This turns OFF pagination controls
next_txt string 'Next' (if pager is set to true) Next text
prev_txt string 'Prev' (if pager is set to true) Prev text
pager_selector string false Custom CSS selector for pager controls wrapper (must be inside pagination wrapper)
perpage number 5 Indicates the number of items to show per page
showcounter boolean true This turns off pager counter which shows actual page and total pages
hidden_css object {display:'none'} Indicates CSS conditions for elements in active page
visible_css object {display:'block'} Indicates CSS conditions for elements in inactive pages
firstpage number 1 The first page displayed when flexipage starts
navigation boolean false Turns ON extended pager controls (one link per page)
carousel boolean false Turns ON carousel
speed number 300 (if carousel is set to true) Time lag between go from one page to next or prev
animation string 'linear' (if carousel is set to true) The name of the easing effect that you want to use, "linear" or "swing". For more: http://plugins.jquery.com/project/Easing

selectPage method

You can control any pager from outside whit this method:

$('.fp-example').selectPage('next');

$('.fp-example').selectPage('prev')

$('.fp-example').selectPage(9)

Download

Examples

Example 1 » Default pagination

$('.example-1').flexipage();

Example 2 » Pagination without counter

$('.example-2').flexipage({
   showcounter:false
});

Example 3 » Pagination with full navigation (one link per page)

$('.example-3').flexipage({
   pager : false,
   navigation : true
});

Example 4 » Customized pager

$('.example-4').flexipage({
   perpage:3,
   firstpage: 3,
   next_txt: "Pasa baby!",
   visible_css: {opacity:1},
   hidden_css: {opacity:0.2}
});

Example 5 » Form Wizard

Step 1

Step 2

Step 3 

$('.example-5').flexipage({
   element:'fieldset',
   perpage:1,
   firstpage: 1,
   next_txt: "Continue »",
   prev_txt: "« Back"
});

Example 6 » Photo Gallery

$('.example-6').flexipage({
     perpage:10
});

Example 7 » Image slide

$('.example-7').flexipage({
     perpage:1
});

Example 8 » Carousel

$('.example-8').flexipage({
     perpage:1,
     carousel: true,
     speed:800,
     animation: "swing"
});

Example 9 » Customized carousel

var example9 = $('.example-9').flexipage({
                  perpage:1,
                  carousel: true,
                  navigation: true,
                  pager: false
                });

Using selectPage method

Click and see the example above.

Prev Go to page 5 Next 
$('.siguiente').click(function(e){
e.preventDefault()
example9.selectPage('next')
})

$('.anterior').click(function(e){
e.preventDefault()
example9.selectPage('prev')
})

$('.ir-a-5').click(function(e){
e.preventDefault()
example9.selectPage('5')
})

Example 10 » Large carousel

$('.example-10').flexipage({
  perpage:5,
  carousel: true,
  speed:1000,
  animation: "swing"
});
$('.example-10b').flexipage({
  perpage:1,
  carousel: true,
  speed:800,
  animation: "swing"
});