Advanced Pagination content is divided into subareas and creates a pagination in order to control. The script is based on jQuery and brings a handful of options and callbacks with, so that it can be adapted to the custom needs.

Demo

Bleak moonfish sandfish righteye flounder warty angler ray." Masu salmon combtooth blenny Atlantic trout sabertooth featherfin knifefish sailbearer trevally mummichog, sand diver zebra trout.

Page 1 |

Chubsucker mud catfish slickhead ballan wrasse bala shark roosterfish garpike barbel electric knifefish. Ratfish Atlantic silverside sailfin silverside barbeled houndshark ruffe flier earthworm eel weever panga yellow-edged moray, sillago bonytongue pelican gulper.

| Page 2 |

Molly squawfish, bristlemouth! Vendace lefteye flounder halibut, striped bass swordtail slender barracudina. Conger eel threadtail, nurse shark sheatfish triplespine, inanga crappie wolf-herring dory flat loach!

| Page 3

Download

Usage

The plugin Advanced Pagination requires jQuery and must be included after the library.

<!DOCTYPE html>
<html>
<head>
	[...]
</head>
<body>
	[...]
	<div id="paginaNav"></div>
	<div id="pagesWrap">
    
		<div class="page">
			<!-- content page 1 -->
		</div>

		<div class="page">
			<!-- content page 2 -->
		</div>

	</div>
	[...]
	<script src="libs/jquery.min.js"></script>
	<script src="plugins/advanced-pagination.min.js"></script>
</body>
</html>

Here is just the bare minimum markup. Other possibilities there in the demo. The plugin must be called in (document). ready function.

$(document).ready(function(){
  	$('#pagesWrap').advancedPagination();

});

Advanced Pagination does not require any CSS styles. The finished appearance will you leave - have fun when styling!

Options

Key Default value Description
pageClass 'page' CSS class of the container, which divided the sections ("pages"). (String)
paginaContainer '#paginaNav' In this HTML element, the page navigation (pagination or pagina) is generated. The child elements created are a tags. (String)
paginaAnchText false If set to true, the pagina links contain text instead of numbers. The title text is passed to the respective page (.page) with the attribute data-text. (Boolean)
pageAnnimation 'fade' The option changes the animation of the page transitions. Possible are the information "fade" or "slide". (String)
animationSpeed 250 Specifies the animation speed of the page transitions. (Number)
easing '' Adds the page changes an easing effect. (String)
prevLink '.prevPage' You can add links to the previous page. The script responds to the specified class or ID. (String)
nextLink '.nextPage' Similar to prevLink, only it goes to the next page here. (String)
onPrev   You can overwrite the change to the previous page with your own function. (Function)
onNext   Overrides the switch to the next page with a custom function. (Function)
onSwitch   A separate function that is executed between page flipping. (Function)
afterSwitch   A Custom function that is run after the page switch. (Function)

Changelog

  • Version 1 - final plugin

Licence

The plugin jacc is under MIT licence and GNU licence.
Copyright © 2014 Konrad Rolof