jQuery Flip Book Plugins – Booklet

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)
<link href="jquery.booklet.latest.css" type="text/css" rel="stylesheet" />
<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>
<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

Download

For more Advanced Usages, please check the demo page or visit the official website.