jQuery Flip Book Plugins - Booklet

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)

How to Use

Add the css below to your html page

<link href="jquery.booklet.latest.css" type="text/css" rel="stylesheet" />

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>

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>