GrassHopperPebbles.com Demos

JQuery Plugins

imBookFlip 1.3 - Load Pages Using Ajax

The following example displays the imBookFlip plugin using ajax to retrieve the pages.

Set the pages.base_url if all your pages have the same url prefix.

[{"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"}]
$(document).ready( function() {
	var myBook = $("#imBookCntnr").imBookFlip({
		page_class: 'imBookPage',
		sound_manager: {swf_loc: '/assets/js/soundmanager/soundmanager2.swf', audio_loc: '/assets/js/jquery/imbookflip/StarGate-SG1.mp3'},
		pages: {src: '/assets/js/jquery/imbookflip/pages.php', base_url: '/assets/js/jquery/imbookflip/pages/'}
	});
	myBook.create();
});	
.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;
}	

Click on each page to see the page turn effect. View the source for this page to see how to setup the plugin. For documentation about the imBookFlip plugin, view the blog post.

Tags

, , , , , , ,