A Flipbook View In jQuery Plugin – Booklet

A flipbook view free jQuery Plugin with Booklet. This is one of the content displaying tools on the web page that have been developed using jQuery. The jQuery plugin will navigate the user to read the content view as flipbook. The web content convert in to flipbook view. jQuery flipbook plugin gives you a real and extraordinary experience of reading by displaying the content in flipbook layout on the web itself.

jQuery Plugin’s Booklet allows the children, adult, and specially the book lovers to easily accessing the content on the web with its friendly interfaces. The content like Books, Newspapers, dairies, etc is the materials that required flipping the page to read and write the content. The jQuery Plugin will allow you to read the content same like as we do while reading the physical content in the books. For that, we do not need to strain much ourself whereas; you just need to download the booklet that’s been developed using jQuery flipbook plugin in one click & you can follow step by step in below section.

How to use :

install jQuery Booklet into your webpage, Add with jQuery, jQuery UI (optional), jQuery Easing and the booklet CSS and JS files :

<link href="booklet/jquery.booklet.latest.css" type="text/css" rel="stylesheet" />
// jQuery
<script src="/jquery/2.1.0/jquery.min.js"></script>
 
// jQuery UI (optional)
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
 
// Booklet
<script src="booklet/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="booklet/jquery.booklet.latest.min.js" type="text/javascript"></script>

Add Html code for layout flip-booklet :

<div id="mybook">
    <div>
        <h3>Yay, Page 1!</h3>
    </div>
    <div>
        <h3>Yay, Page 2!</h3>
    </div>
    <div>
        <h3>Yay, Page 3!</h3>
    </div>
    <div>
        <h3>Yay, Page 4!</h3>
    </div>
</div>

included script and you can initialize the booklet :

$(function() {
    //single book
    $('#mybook').booklet();
 
    //multiple books with ID's
    $('#mybook1, #mybook2').booklet();
 
    //multiple books with a class
    $('.mycustombooks').booklet();
});

Other Options :

//init
$(".selector").booklet({ width: 500 });
 
//getter
var width = $(".selector").booklet("option", "width");
 
//setter
$(".selector").booklet("option", "width", 600);

Done