jQuery Flipbook using turn.js

Turn.js is one of the most power full Flipbook plugin which create a Filipbook 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 flipbook using turn.js.

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

<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>

$(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');
});

<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()