English Русский
Live Demo

jPagedScroll and jLoader

A set of two scripts that will help you to develop and publish your own magazine on iPad and Android. Scripts are loaded into a webview-based application (PhoneGap) and allow users to swipe pages of magazine.

The first script is jPagedScroll and it allows users to swipe magazine in 4 directions. The second one is jLoader and it manages page loading and unloading on-the-fly so the memory leaks are prevented.

jPagedScroll Features:

jLoader Features:

jPagedScroll and jLoader use jQuery 1.4. The swiper works well on iPad and Android and also with every modern browser: Chrome 10, Safari 5, Firefox 4, Opera 11 (lags) and Internet Explorer 9.

Versions

A demo version is available so you can download and test it for a while. The demo is the previous version of the scripts, it works only in Chrome, Safari and on iPad. Its code is obfuscated.

To buy the full version, just click ‘Buy’. The full version provides the latest versions of the scripts, documentation, a test magazine issue, free updates subscription and support.

We also have sources of a magazine manager that allows to download new issues to the user’s device. It also has an enhanced page navigation and other useful things. Although we don’t prodive any demos because the manager’s code leaves much to be desired, you can still contact us and buy it too for your futher purposes.

In action

There’re several project based on our scripts.

Usage

HTML-code is small and describes magazine swiping area:

	<div id="scroll-area"></div>
            

jQuery and scripts inclusion:

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jpagedscroll.js"></script>
	<script type="text/javascript" src="js/load.js"></script>
            

Magazine CSS inclusion:

	<link href="css/magazine.css" media="screen" rel="stylesheet" type="text/css" />
	<link href="css/cover.css" media="screen" rel="stylesheet" type="text/css" />
            

Meta-tags to set 1:1 scale for iPad:

	<meta name="app-mobile-web-app-capable" content="yes" />
	<meta name="apple-touch-fullscreen" content="YES" />
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
            

Magazine matrix loading and activating the swiper:

	$.get('js/matrix.js', '', function(data) {
		eval(data); // json
		$('#scroll-area').jLoader(matrix);
	});
            

jPagedScroll without jLoader

If you want to use jPagedScroll without jLoader, you have to describe the magazine layout in HTML instead of giving a matrix and separate pages to load.

jPagedScroll doesn't use any specific CSS classes to get pages. It determines pages as a children of the swiping area. First-level children become chapters, the children of the second level become pages of a chapter. It's still a good idea to mark chapters and pages with a class.

	<div id="scroll-area">
		<div class="chapter">
			<div class="page">
			Chapter 1 Page 1
			</div>
			<div class="page">
			Chapter 1 Page 2
			</div>
		</div>
		<div class="chapter">
			<div class="page">
			Chapter 2 Page 1
			</div>
		</div>
	</div>
            

Script inclusion looks the same, but load.js is no longer needed. And here's a nested version of jPagedScroll:

	$(document).ready(function() {
		$('#scroll-area').jPagedScroll();
		$('.scroll-area-small').jPagedScroll();
	});
    		

Options

All jPagedScroll parameters are optional:

threshold Time in milliseconds, a thresold between short and long swipes. Short swipe changes page immediately, long swipe sticks to the finger movements and swipes the page only if it's been shifted more than on half of its width.

Default: 350

thresholdX, thresoldY The shift in pixels by X or by Y which should be taken to let script determine if the swipe horizontal or vertical.

Default: 10, 10

scrollTime Swipe animation time. CSS-time, string.

Default: '0.3s'

easeEffect Animation easing function. String.

Default: 'ease-out'

jumps Determines the behavior of swiping when user swipes outside of the area. In iOS you can see that swiping is getting slower when you swiping outside of the screen. Set to 0 to turn this effect off. Set to 1 to turn it on only for the main area. Set to 2 to to to to. Sorry, to turn it on for all nested areas as well as for the main area.

Default: 1

callback Callback-function to call every time when page swipes. Pass this to jLoader if connected.

Default: function(currentChapter, currentPage) { }

book This one is used when you want to pass a magazine object containing pages information. Used by jLoader to call jPagedScroll.

jLoader parameters:

matrix JSON object desribing the so called magazine matrix. The magazine matrix describes magazine layout, path to pages, links etc

Required

settings An object containing jPagedScroll settings which will be sent from jLoader, and jLoader settings:

сhapterClass—the class that will be given to a chapter wrapper (default: chapter);
pageClass—the same class for page (default: page);
innerScrollerSelector—the selector of nested areas (default: .scroll-area-small);
cacheWindow—cache window size (default: 1).

Support and futher developing

The script could be optimized and upgraded for any purposes on your demand. We provide free support and updates for all our customers.

December 2012
Layouting: Eugene Pratusevich
Debugging and preparing for sale: Andrew Marcus
Portfolio