GrassHopperPebbles.com Demos

JQuery Plugins

imBookFlip 1.3 - Ajax using Iframe

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

This example also shows how to load a page in an iframe.

I also set the before_show and on_show event for a page.

[{"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"}]	
$(document).ready( function() {
	var myBook = $("#imBookCntnr").imBookFlip({
		page_class: 'imBookPage',
		pages: {src: '/assets/js/jquery/imbookflip/pages_external.php', base_url: '/assets/js/jquery/imbookflip/pages/'}
	});
	myBook.create();
	$('#nextButton').click(function() {
		myBook.flipPage('next');
	});
	$('#prevButton').click(function() {
		myBook.flipPage('previous');
	});
});	

function doBefore(el) {
	alert('before show. page container: '+el);
	return true;
}

function doOnShow(el) {
	alert('on show. page container: '+el);
}	
.imBookPage {
	position:absolute;
	left:0px;
	top:0px;
	width: 300px;
	height:360px;
	color:#fff;
	overflow:hidden;
	border: solid 1px #000;
}
#bookControl {
	float:left;
	width:100%;
}
#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

, , , , , , ,