jPagedScroll electronic magazines manager

↑

←

→

↓

Download

JPagedScroll and jLoader scripts

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:

Provides smooth animation on mobile devices. Hardware Acceleration is used;
Manages swiping in 4 directions: up, down, left and right;
Supports nested areas of swiping;
Distincts long and short swipes;
Works with every possible page contents;
Allows to use all default actions: links opening, text selection etc;
Optional linkage with jLoader.

jLoader Features:

Dynamic contents loading via AJAX;
Support of local and remote resource to load;
Forced images unloading;
Customizable window cache size;
Magazine layout matrix in JSON;
Notifications to the Native part of application when page changes;
Event-driven linkage with jPagedScroll.

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.

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).