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.
