jQuery Flip Book using turn.js

Turn.js is one of the most power full Flip Book plugin which create a Filip Book with HTML5 and it wokrs on Most of the latest browser and divices. Please download turn.js file form here and visit this page to get full documentation about turn.js. Let create a flip book using turn.js.

[Drag from corner or use left right arrow key to page flip]

HTML Code:

<div id="flipbook">
<div><img src="pages/cover.png" alt="cover" title="cover page" /></div>
<div><img src="pages/page1.png" alt="Page-1" title="page-1" /></div>
<div><img src="pages/page2.png" alt="Page-2" title="page-2" /></div>
<div><img src="pages/page3.png" alt="Page-3" title="page-3" /></div>
<div><img src="pages/page4.png" alt="Page-4" title="page-4" /></div>
<div><img src="pages/page5.png" alt="Page-5" title="page-5" /></div>
<div><img src="pages/page6.png" alt="Page-6" title="page-6" /></div>
<div><img src="pages/page7.png" alt="Page-7" title="page-7" /></div>
<div><img src="pages/page8.png" alt="Page-8" title="page-8" /></div>
<div><img src="pages/back.png" alt="back" title="back" /></div>
</div>

jQuery Code

$(window).ready(function() {
$('#flipbook').turn({
display: 'double',
acceleration: true,
});
});

$(window).bind('keydown', function(e){
if (e.keyCode==37)
$('#flipbook').turn('previous');
else if (e.keyCode==39)
$('#flipbook').turn('next');
});

CSS Code

<style type="text/css">
#flipbook{
  width:600px;
  height:350px;
}
</style>

 

Options:

• acceleration - This is used to sets the hardware acceleration mode, the default is true.
• display - This is use to set the display page number. This can either single or double, default is double
• duration - Sets the duration of the effect in microseconds, default: 600
• gradients - Sets the gradient mode, default: true
• height - Defines the height of the page, default: $('selector').height()
• inclination - Defines the inclination of the folded page when turning, default: 0
• page - Set the initial page, default: 1
• pages - Sets the number of pages, default: $('selector').children().length
• when - Defines the events.
• width - Defines the width, $('selector').width()