Web developers develop the effects that are inspired by the real world examples. Page-flips are one of the most popular ones of them in web design. Flipboard style is one such famous page flip effect implementd which gives your web layout look like a book with turning pages like real books. To achieve this, you don’t need to be a master in JQuery Coding. Thanks to Booklet JQuery plugin. Booklet is a jQuery powered plugin for a flipbook style layout. The plugin provides many options to customize it as per your needs. You can change the speed, starting page, shadows, reading direction and many more.
The main advantage of this JQuery plugin is that keyboard navigation makes it really easy to use this plugin. One more is you can have customized buttons for the navigation’s too.
[sc:demobuttons demolink=”http://demo.techglimpse.com/books-style/” boxlink=”http://builtbywill.com/code/booklet/”]
Step 1 : In the head section of your html template, include the below JQuery plugins and other Javascripts as show below :
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js” type=”text/javascript”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js” type=”text/javascript”></script>
<script src=”booklet/jquery.easing.1.3.js” type=”text/javascript”></script>
<script src=”booklet/jquery.booklet.latest.min.js” type=”text/javascript”></script>
<link href=”booklet/jquery.booklet.latest.css” type=”text/css” rel=”stylesheet” media=”screen, projection, tv” />
After you download the package, unzip and you will find jquery.easing.1.3.js, jquery.booklet.latest.min.js and jquery.booklet.latest.css files in booklet directory.
Step 2 : Insert the content into the book. The following shows a simple four page book.
<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>
Step 3 : Initialize the Booklet
$(function() {
//single book
$(‘#mybook’).booklet();
width: ‘69%’,
height: ‘50%’,
pageNumbers: false,
keyboard: true,
next: ‘#custom-next’,
prev: ‘#custom-prev’
});
The different options above shows width and Height set, pagenumbers made invisible, keyboard navigation is enabled and for creating custom previous and next buttons a control has been created. You can see this options working on the demo page. For more customization read the complete documentation on the BookLet Plugin.
Happy Book Reading !
[sc:demobuttons demolink=”http://demo.techglimpse.com/books-style/” boxlink=”http://builtbywill.com/code/booklet/”]
