Quick start

massPaging - it jQuery plugin that allows you to split a large content site to the pages and manage these pages using a variety of controls In order to break up the content to the pages and place controls content on site, follow the steps below.

Step 1. Include the files

Before can use the plugin massPaging functions, you need to download into browser CSS and Javascript files, in which these functions are defined. To do this, add into header head HTML-page the following lines:

<head>
	<!-- . . . -->
	<link rel="stylesheet" href="css/massPaging.css">
	<script src="js/jquery-3.7.1.min.js"></script>
	<script src="js/jquery.masspaging.js"></script>
	<!-- . . . -->
</head>

If you imported this version of jQuery or any other, it is not necessary to import it for the second time

Step 2. Create a container and place into it the content

The container can be any HTML element with block type (for example, div element).

<body>
	<div id="veryLongContent">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor...
	</div>
</body>

A unique identifier (id) of the container to be used in the next step to get the pointer to the pagination container.

Step 3. Create a pagination

Create pagination should be after the Web page and the image will be loaded in its entirety. This will give confidence that the container for the pagination is created and it can be accessed by the class or id. To initialize the card after the page is loaded, you can use the $(window).on('load',function(){})

<script type="text/javascript">
	$(window).on('load',function(){
		$('#veryLongContent').massPaging();
	})
</script>

Step 4. Add options for pagination

The parameters are specified in the object and transferred to the plugin at initialization

<script type="text/javascript">
	$(window).on('load',function(){
		//default options
		var opt = {
			startPage:1,				//The current page that show on start. It may take the values: any positive number (default: 1)
			easing:'easeOutQuart',		//Easing animation. http://gsgd.co.uk/sandbox/jquery/easing (default: 'easeOutQuart')
			duration: 700,				//Duration of animation. It may take the values: any positive number (default 700)
			effect:'hSlide',			//Animation effect It may take the values: 'simple', 'fade', 'hSlide', 'vSlide' (default:'hSlide')
			pageHeight:'auto',			//Height of pages. It may take the values: any positive number or 'auto' (default:'auto')
			mpBtnVisible:5,				//maximum visible pages (default: 5)
			navDotWrapper:false,		//Element for generating Dotted control. It may take the values: false or [selector] (default:false)
			navProgressWrapper:false,	//Element for generating Progress control. It may take the values: false or [selector] (default:false)
			navGoWrapper:false,			//Element for generating Go To control. It may take the values: false or [selector] (default:false)
			navInfoWrapper:false,		//Element for generating info block. It may take the values: false or [selector] (default:false)
			navPrevWrapper:false,		//Element for generating Previous button. It may take the values: false or [selector] (default:false)
			navNextWrapper:false,		//Element for generating Next button. It may take the values: false or [selector] (default:false)
			navFirstWrapper:false,		//Element for generating First button. It may take the values: false or [selector] (default:false)
			navLastWrapper:false,		//Element for generating Last button. It may take the values: false or [selector] (default:false)
			navNumbersWrapper:false,	//Element for generating Number buttons. It may take the values: false or [selector] (default:false)
			splitSymbols:'.',			//Symbol, which divides the content into parts. It may take the values: string or namber (default:'.')
			splitSymbolsReplace:false,	//The symbol that replaces the divide symbol. It may take the values: string, namber or false (default:false)
			labelFirst:'First',			//Contents First Button. It may take the values: any string (default:'First')
			labelLast:'Last',			//Contents Last Button. It may take the values: any string (default:'Last')
			labelNext:'Next',				//Contents Next Button. It may take the values: any string (default:'Next')
			labelPrev:'Prev',				//Contents Prev Button. It may take the values: any string (default:'Prev')
			draggable:true,				//Controls the ability to drag and drop page. It may take the values: true or false (default:true)
			saveState:true,				//Controls the ability to save the state of the pages in the History of browser. It may take the values: true or false (default:true)
			create: function(){},		//Triggered when the massPaging is created
			pageChange: function(oldPage,newPage){}		//Triggered when the page num is changed	
		}
		$('#veryLongContent').massPaging(opt);
	})
</script>

Include only those parameters that differ from the default settings

Step 5. Add control elements

The controls are generated by plug-in yourself. To do this, add a container into code the page. Set for this container class name. This class name you need to register in the plugin, pointing it in the settings.

<script>
$(window).on('load',function(){
	var opt = {
		navFirstWrapper:'.boxNavFirst',	
		navPrevWrapper:'.boxNavPrev',
		navNumbersWrapper:'.boxNavNumbers',	
		navNextWrapper:'.boxNavNext',
		navLastWrapper:'.boxNavLast',
		navInfoWrapper:'.boxNavInfo'	
	}
	$('#veryLongContent').massPaging(opt);
})
</script> 

<span class="boxNavFirst"></span>
<span class="boxNavPrev"></span>
<span class="boxNavNumbers"></span>
<span class="boxNavNext"></span>
<span class="boxNavLast"></span>
<div class="boxNavInfo"></div>

Result

The Full code of an example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Fast start. Installing the plugin massPaging</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="css/massPaging.css">
	<script src="js/jquery-3.7.1.min.js"></script>
	<script src="js/jquery.masspaging.js"></script>
    <script>
	$(window).on('load',function(){
		var opt = {
			pageHeight:300,
			navFirstWrapper:'.boxNavFirst',	
			navPrevWrapper:'.boxNavPrev',
			navNumbersWrapper:'.boxNavNumbers',	
			navNextWrapper:'.boxNavNext',
			navLastWrapper:'.boxNavLast',
			navInfoWrapper:'.boxNavInfo'	
		}
		$('#veryLongContent').massPaging(opt);
	})
</script> 
</head>

<body>
    <div id="veryLongContent">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor purus vel vulputate ornare. Integer imperdiet tincidunt tortor, at fringilla nisl egestas pretium. Integer blandit dignissim felis. Nulla nec tellus risus. Suspendisse cursus ex vel mi varius sollicitudin. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam aliquet nunc vitae ultrices molestie. Morbi elementum libero dictum, congue arcu quis, auctor lectus. Aenean lobortis porttitor tristique. Fusce sed risus tempor augue consectetur consequat. Integer sem ex, hendrerit ac laoreet sed, volutpat dignissim libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc nec tellus lectus.	Aliquam semper, ipsum sagittis gravida feugiat, ipsum arcu imperdiet dolor, eget convallis dolor erat at libero. Donec mattis nibh risus, sit amet sollicitudin nisi ultrices ut. Etiam elementum vehicula mi, ac faucibus lorem euismod vel. Curabitur maximus pharetra diam sed fermentum. Nullam tempor scelerisque scelerisque. Nullam blandit facilisis ante, ut vehicula odio pharetra at. Proin molestie mauris orci, ac auctor tortor molestie in. Ut semper tincidunt sem a tristique. Sed at consequat lorem. Etiam sed accumsan nunc, sit amet mollis ante. Suspendisse id interdum turpis. Quisque venenatis, est et viverra molestie, risus massa maximus ex, nec lacinia quam magna id felis. Phasellus eget odio a metus ultricies auctor eu sed felis. Morbi venenatis molestie nibh vitae lacinia. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vel elit metus. Nullam vitae ornare leo. Nunc lobortis sem dictum varius congue. Aliquam non augue dictum, fringilla risus et, tempus elit. Vestibulum auctor justo vitae pellentesque posuere. Etiam fermentum posuere lacus, ac convallis libero vestibulum vitae. Nam arcu velit, viverra auctor fringilla sed, tempor eu nisi. Curabitur quis ligula pulvinar nisi ornare blandit. In hendrerit interdum diam sit amet tincidunt. Morbi porttitor ultricies urna ut mattis. Donec ut tortor sit amet nunc facilisis blandit vel pellentesque elit. Sed in magna odio. Sed eleifend elementum auctor. Quisque pulvinar nunc nisl, nec congue mi suscipit sed. Nunc facilisis congue lacus, nec fermentum eros dignissim nec. Nulla ullamcorper, mauris quis cursus lobortis, magna nulla scelerisque sapien, quis varius quam lorem sed nulla. Nulla justo nunc, sodales vehicula facilisis porta, euismod at nulla. Suspendisse potenti. Donec porttitor urna a imperdiet elementum. Donec finibus nisl eu nunc lobortis, sed convallis orci mattis. Nunc imperdiet risus at lorem pulvinar lacinia. Suspendisse pretium neque velit, a pretium nulla dapibus vel. Mauris vehicula, risus ac elementum luctus, velit metus imperdiet nulla, non vulputate dolor orci et ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec non molestie neque. Sed cursus tortor mi, vel luctus est dapibus vel. Morbi mattis ante in condimentum feugiat. Praesent ultrices id nisi eget lobortis. Suspendisse potenti. Phasellus viverra semper consectetur. Sed rutrum mi justo, eu scelerisque odio iaculis laoreet. Maecenas posuere imperdiet pulvinar. Proin feugiat sem in velit ullamcorper, eu maximus tellus porttitor. Etiam at est vitae lacus hendrerit suscipit in in libero. Nam blandit felis eu fringilla elementum. Nulla imperdiet at augue vitae consequat. Vivamus lacinia fermentum lectus in tincidunt. Morbi dictum enim a ligula pretium, a pretium tortor faucibus. Mauris malesuada urna quis tempus euismod. In a enim eget massa tincidunt auctor in eu magna. Maecenas suscipit, erat quis mollis suscipit, ipsum tortor dictum metus, non sodales nibh sem nec massa. Phasellus tellus velit, finibus non suscipit nec, sodales nec purus. Morbi id sodales lectus. Etiam a libero ut nulla dictum hendrerit a quis eros. Nunc dolor enim, bibendum sed sollicitudin a, condimentum in purus. Vivamus tincidunt quis purus pellentesque ullamcorper. Donec accumsan non risus vel vulputate. Proin tincidunt, orci sed faucibus rhoncus, tellus purus pellentesque metus, sed mattis nibh nulla ut mi. Curabitur venenatis dui quam, in elementum neque venenatis nec. Maecenas ligula metus, viverra at egestas egestas, suscipit et quam.
	</div>
	
	<div align="center">
		<span class="boxNavFirst"></span>
		<span class="boxNavPrev"></span>
		<span class="boxNavNumbers"></span>
		<span class="boxNavNext"></span>
		<span class="boxNavLast"></span>
		<div class="boxNavInfo"></div>
	</div>
</body>
</html>

Открыть пример в новом окне

Did not work out?

If when installing and using plugin you have a problems, follow these steps:

See a list of ready-made examples. Perhaps the solution to your problem has already been implemented.
Send us an email describing the problem to the email limasscode@gmail.com

Documentation

Sets of control elements

Type of contents

More Demos

Themes

Possible errors

massPaging / Quick start