Booklet is a jQuery tool for displaying content on the web in a flipbook layout. It was built using the jQuery library. You can place any sort of html elements inside of your booklet pages. There is no limit to the possibilities you can create. Even using simple options, you can have elaborate displays. This plugin uses default options including manual page turning, keyboard navigation, page numbers, and shadows. The primary features of Flip Book Plugin:
- Works on iPad and iPhone.
- Simple, beautiful and powerful API.
- Allows to load pages dynamically through Ajax requests.
- Pure HTML5/CSS3 content.
- Two transition effects.
- Works in old browsers such as IE 8
Live Demo
jQuery Booklet
This is a sample booklet! It uses all of the default options, but feel free to explore all the possibilities in the documentation section.
Content Variety
You can place any sort of html elements inside of your booklet pages. There is no limit to the possibilities you can create.
Default Options
The default options include:
Manual Page Turning
This option requires jQuery UI, but will degrade and be usable if not included.Keyboard Navigation (use your arrows!)
Page Numbers
Shadows (during animation)
What's Next?
- View the Documentation Reference
- View Demos
- View Installation Instructions
- Download below!

How to Use
1. CSS
Add the css below to your html page
<link href="jquery.booklet.latest.css" type="text/css" rel="stylesheet" />
2. HTML
Create a container where you want to render Flip Book
<div id="mybook">
<div style="background-color: #efefef">
<div>
<h3>jQuery Booklet</h3>
<p>This is a sample booklet! It uses all of the default options, but feel free to explore all the
possibilities in the <a ng-href="#/documentation" href="#/documentation">documentation</a> section.</p>
<h3>Content Variety</h3>
<p>You can place any sort of html elements inside of your booklet pages. There is no limit to the
possibilities you can create. Even using simple options, you can have elaborate displays.</p>
</div>
</div>
<div>
<div>
<h3>Default Options</h3>
<p>The default options include:</p>
<ul>
<li>
<h4>Manual Page Turning</h4>This option requires jQuery UI, but will degrade and be usable if not
included.
</li>
<li>
<h4>Keyboard Navigation (use your arrows!)</h4>
</li>
<li>
<h4>Page Numbers</h4>
</li>
<li>
<h4>Shadows (during animation)</h4>
</li>
</ul>
<p>Move to the next page by dragging or the arrow keys to see the animation in action!</p>
</div>
</div>
<div>
<div>
<h3>What's Next?</h3>
<ul>
<li><a ng-href="#/documentation" href="#/documentation">View the Documentation Reference</a></li>
<li><a ng-href="#/demos" href="#/demos">View Demos</a></li>
<li><a ng-href="#/installation" href="#/installation">View Installation Instructions</a></li>
<li>Download below!</li>
</ul>
</div>
</div>
<div>
<div>
<img src="images/sample-booklet-image.png" alt="" width="100%" height="100%">
</div>
</div>
</div>
3. Javascript
Load jQuery library together with the Flip Book library into your code
<script src="jquery-2.1.0.min.js"></script>
<script src="jquery-ui-1.10.4.min.js"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="jquery.booklet.latest.min.js" type="text/javascript"></script>
<script>
$(function () {
$('#mybook').booklet();
});
</script>
Source Code
DownloadFor more Advanced Usages, please check the demo page or visit the official website.