booklet

website:http://builtbywill.com/

1. install booklet plugin

1) Load jQuery and jQuery Ui lib like the follow codes:

<script type="text/javascript" src="./jquery-1.5.min.js"></script>
<script type="text/javascript" src="./jquery-ui-1.8.9.custom.min.js"></script>

 2)Add the Easing jQuery Plugin. While not completely necessary, if  not included your animations will not look as nice.

 

<script type="text/javascript" src="./jquery.easing.1.3.js"></script>

 

3)Load the Booklet js and CSS files. Be sure when editing the CSS file to make image paths relative to the CSS file. When changing some of the image options in the Booklet options, those images will be relative to the page itself .

<script type="text/javascript" src="./jquery.booklet.1.2.0.min.js"></script>
<link href="./jquery.booklet.1.2.0.css" rel="stylesheet" type="text/css" />

4) To create a booklet you must fisrt place the content for the book onto your page .

a .Make an outside container <div > and give it an identifer like an ID or Class .

b .Add a <div > with class "b-load " inside the container .

c .Inside of "b-load ", add your pages . The booklet will recognize each direct child of "b-load " as a side ,which could contain content or be a single item .

<div id="mybook">
	<div class="b-load">
		<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>
</div>

5)Using JQuery selectors initialize your booklet .You can setup multiple books eihter with the same class or within the same selector ,as Lang as you want their options to be the same .

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