JQuery Plugin: imBookFlip. Page Turning without Flash

I was asked by a client to create a bookflip (Page Turn) effect that did not require Flash. I found a Javascript class and decided to use it as the basis for a JQuery plugin. The imBookFlip plugin can load a book in an iframe or directly on the page. The book’s pages can be set to turn when manually clicked only, begin auto flip (turn automatically) as soon as the html page loads, or begin auto flip when first page (front cover is clicked). Adding audio is easy because Sound Manager can be used with the plugin.

Default Setup

The default mode for the imBookFlip plugin is inside a container that is positioned using relative positioning (position: relative).

First we load the necessary files:

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

Next we create a style for the book and a style for the book’s pages. The pages can be any dimension.

#myBook {
	display:none;
	position:relative;
	width: 604px;
	height:362px;
	float:left;
}
.imBookPage {
	position:absolute;
	left:0px;
	top:0px;
	width: 300px;
	height:360px;
	color:#fff;
	overflow:hidden;
	border: solid 1px #000;
}

Now you create your pages (inside the book container). Make sure you give your book’s container an id. The first page is the book cover (displays on right side of book). You can also have a back cover (displays on left).

<div id="myBook" style="display:none;">			
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/stargate.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page1.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page2.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page3.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page4.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page5.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page6.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page7.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page8.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/joneil.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/scarter.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/djackson.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/tealc.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/cmitchell.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/vala.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/stargate.jpg")></div>
</div>

Each div is a page and is assigned the page class (imBookPage). This class will be needed when using the imBookFlip plugin.

?View Code JAVASCRIPT
$(document).ready( function() {
    $("#myBook").imBookFlip({
	page_class: 'imBookPage'
    });
});

The settings above will load the book in a relative position on a page and will require user input (click) to move from page to page. The user can move forward and backwards (next and previous pages).

Iframe Option

You also have the option of loading the book in an iframe.

Parent File
The iframe will be loaded in the parent html file (php, etc). The parent file set up is similar to the default mode setup. The major difference is that the html markup for the book is not created on this page.

Iframe Styling
As with the default mode styling, you need a page style, but instead of a book style, you need a frame container styling:

.imBookPage {
	position:absolute;
	left:0px;
	top:0px;
	width: 300px;
	height:360px;
	color:#fff;
	overflow:hidden;
	border: solid 1px #000;
}
 
#iframeCntnr {
	width:604px;
	height:362px;
	padding:0;
	float:left;
}

To use the iframe option, you need the following:

src: The iframe source file.
book: The id of the book container in the iframe source file.

?View Code JAVASCRIPT
$(document).ready( function() {
    $("#iframeCntnr").imBookFlip({
	page_class: 'imBookPage',
	iframe: {src: 'assets/iframesrc/book.php', book: 'myBook'}
    });
});

Iframe Source File
The iframe source file (iframe.src) also contains the imBookPage style.

.imBookPage {
	position:absolute;
	left:0px;
	top:0px;
	width: 300px;
	height:360px;
	color:#fff;
	overflow:hidden;
	border: solid 1px #000;
}

The book’s pages are also contained in the iframe source file.
Note: JQuery and other script files (like this plugin) do not need be loaded into the iframe source file.

<div id="myBook" style="display:none;">			
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/stargate.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page1.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page2.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page3.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page4.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page5.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page6.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page7.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page8.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/joneil.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/scarter.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/djackson.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/tealc.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/cmitchell.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/vala.jpg")></div>
	<div class="imBookPage" style="background: url(../js/jquery/imbookflip/stargate.jpg")></div>
</div>

Ajax Option

As of version 1.3, you now have the ability to load the pages ajaxally. Just create a file for each page and then load then load a JSON object with the page information.

?View Code JAVASCRIPT
$(document).ready( function() {
    $("#imBookCntnr").imBookFlip({
	page_class: 'imBookPage',
	pages: {src: 'assets/imbookflip/book.php', base_url: '/assets/imbookflip/pages/'}
    });
});

The pages.src option is the source JSON file. If all of your files are in the same location, use the pages.base_url option so that you don’t have to enter the same path for your files.

The JSON object:

?View Code JAVASCRIPT
[{"page_url": "front_cover.php"},{"page_url": "page1.php"},{"page_url": "page2.php"},
{"page_url": "page3.php"},{"page_url": "page4.php"},
{"page_url": "page5.php"},{"page_url": "page6.php"},
{"page_url": "back_cover.php"}]

The CSS:

.imBookPage {
	position:absolute;
	left:0px;
	top:0px;
	width: 300px;
	height:360px;
	color:#fff;
	overflow:hidden;
	border: solid 1px #000;
}
#imBookCntnr {
	position: relative;
	width:604px;
	height:362px;
	padding:0;
	float:left;
}
.myPage {
	width: 300px;
	height:360px;
}

Iframe Option

By loading the pages using ajax, you also have the option of loading a page in an iframe. Just set the load_in_iframe option to true in the JSON file.

?View Code JAVASCRIPT
[{"page_url": "front_cover.php"},{"page_url": "http://grasshopperpebbles.com/", "load_in_iframe": true},{"page_url": "page_team1.php"},
{"page_url": "http://www.imdb.com/character/ch0005968/", "load_in_iframe": true},{"page_url": "page_team2.php"},
{"page_url": "http://brainstorm.grasshopperpebbles.com/", "load_in_iframe": true},{"page_url": "page_team3.php"},
{"page_url": "back_cover.php"}]

Note: When using the iframe option, you should opt for external control of the page flip rather than clicking on the page itself. Because of the same-domain policy, the on-click event does not work for an iframe whose source is not the same domain.

before_show, on_show

In addition, when using ajax, you can set before_show and on_show events for each page. The value for each should be a Javascript function. Your before_show function should return a value. Use these options if you want something to occur prior to displaying a page (before_show) and after a page is displayed (on_show). The plugin will automatically send the id of the page that is calling the function.

?View Code JAVASCRIPT
[{"page_url": "front_cover.php"},{"page_url": "http://grasshopperpebbles.com/", "load_in_iframe": true},{"page_url": "page_team1.php", "before_show": "doBefore"},
{"page_url": "http://www.imdb.com/character/ch0005968/", "load_in_iframe": true},{"page_url": "page_team2.php", "on_show": "doOnShow"},
{"page_url": "http://brainstorm.grasshopperpebbles.com/", "load_in_iframe": true},{"page_url": "page_team3.php"},
{"page_url": "back_cover.php"}]
?View Code JAVASCRIPT
function doBefore(el) {
	alert('before show. page container: '+el);
	return true;
}
 
function doOnShow(el) {
	alert('on show. page container: '+el);
}

AutoFlip and AutoFlipSpeed

The plugin has three play modes:

autoFlip: off – The default mode. In this mode pages will turn when manually clicked.

autoFlip: auto – Page flip will occur automatically at specified intervals beginning after the html document has loaded.

autoFlip: click – Page flip will begin after user clicks on the first page (the cover page).

The interval in which the pages turn can be set using the AutoFlipSpeed option. The default speed is 7000.

?View Code JAVASCRIPT
$(document).ready( function() {
	$("#iframeCntnr").imBookFlip({
		page_class: 'imBookPage',
		autoFlip: 'click',
		autoFlipSpeed: 5000,
		iframe: {src: 'assets/iframesrc/book.php', book: 'myBook'}
	});
});

Sound Manager

You can add sound to your book using the Sound Manager (download here).

First you need to add it to your page (the parent file, not the iframe source file). Add it before the imBookFlip plugin is added:

<script type="text/javascript" src="js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/soundmanager/soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript" src="js/jquery/imBookFlip/jquery.imBookFlip-0.5.js"></script>

Sound Options
The sound_manager options:

swf_loc: This is location of the soundmanager2.swf file that is needed by Sound Manager.

audio_loc: The location of the audio file that you want to load/play.

debug: Use this if you want debug messages to display screen. Use this in development only. The default is false. I used it when I was trying to figure out why the audio file was not loading. For more information about debug, see Sound Manager Documentation.

?View Code JAVASCRIPT
$(document).ready( function() {
	$("#iframeCntnr").imBookFlip({
		page_class: 'imBookPage',
		autoFlip: 'click',
		autoFlipSpeed: 5000,
		sound_manager: {swf_loc: 'assets/js/soundmanager/soundmanager2.swf', audio_loc: 'assets/js/jquery/imbookflip/StarGate-SG1.mp3'},
		iframe: {src: 'assets/iframesrc/book.php', book: 'myBook'}
	});
});

Update: Version 1.0. 12-28-2011

Over the last couple of years, I have had a few requests for updates to the plugin, but I just found the time to make the changes. One of the requests required me to re-write the plugin using a Object Oriented approach. By making this change, the developer will now have the ability to control the page flip externally (from other elements on the page).

Using the plugin

Instantiating the plugin is similar to the previous version.

?View Code JAVASCRIPT
$(document).ready( function() {
        var myBook = $("#iframeCntnr").imBookFlip({
		page_class: 'imBookPage',
		autoFlip: 'click',
		autoFlipSpeed: 5000,
		sound_manager: {swf_loc: 'assets/js/soundmanager/soundmanager2.swf', audio_loc: 'assets/js/jquery/imbookflip/StarGate-SG1.mp3'},
		iframe: {src: 'assets/iframesrc/book.php', book: 'myBook'}
	});
	myBook.create();
});

First we assign a variable to the plugin and then we call the create method.

Public Methods

In addition to the create method, the plugin has a few other public methods:

flipPage – This method allows the developer to control the page turning via an external element like a button or link. The method takes a single argument – the flip direction (‘next’ or ‘previous’).

?View Code JAVASCRIPT
$(document).ready( function() {
	var myBook = $("#iframeCntnr").imBookFlip({
		page_class: 'imBookPage',
		iframe: {src: 'assets/iframesrc/book.php', book: 'myBook'}
	});
	myBook.create();
	$('#nextButton').click(function() {
		myBook.flipPage('next');
	});
	$('#prevButton').click(function() {
		myBook.flipPage('previous');
	});
});

goToPage – As the name suggests, use this method to go to a specific page. You can use the goToPageSpeed option to control the speed (in milliseconds) at which the book will turn a specific page. The default value is 500.

?View Code JAVASCRIPT
$(document).ready( function() {
	var myBook = $("#iframeCntnr").imBookFlip({
		page_class: 'imBookPage',
		goToPageSpeed: 300,
		iframe: {src: 'assets/iframesrc/book.php', book: 'myBook'}
	});
	myBook.create();
	$('#pageControl').change(function() {
		if ($(this).selectedIndex != 0) {
			myBook.goToPage($(this).attr('value'));
		}
	});
});

Flip Direction

One of my readers pointed that some cultures read books from right to left, so I created the flipDirection option. The default value for this option is ‘ltr’. To have the book flip right-to-left, change this value to ‘rtl’.

?View Code JAVASCRIPT
$(document).ready( function() {
	var myBook = $("#iframeCntnr").imBookFlip({
		page_class: 'imBookPage',
		autoFlip: 'click',
		autoFlipSpeed: 5000,
		sound_manager: {swf_loc: 'assets/js/soundmanager/soundmanager2.swf', audio_loc: 'assets/js/jquery/imbookflip/StarGate-SG1.mp3'},
		iframe: {src: 'assets/iframesrc/book_rtl.php', book: 'myBook'},
		flipDirection: 'rtl'
	});
	myBook.create();
});

Demos

To view demos of the imBookFlip plugin, go to: http://grasshopperpebbles.com/demos/.

The new version is stored on GitHub.

The previous version of the plugin can be downloaded from Google Code or JQuery Plugins.
Enjoy.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks