Moleskine Notebook with jQuery Booklet

Today we will show you how to use and customize the brilliant jQuery Booklet Plugin by talented Will Grauvogel. We will create a virtual Moleskine notebook with latest posts from […]

From our sponsor: Sign up for Mailchimp today.

Today we will show you how to use and customize the brilliant jQuery Booklet Plugin by talented Will Grauvogel. We will create a virtual Moleskine notebook with latest posts from the blog.

You can find the beautiful Moleskine Photoshop file by Dennern at deviantart here:
My Moleskine (PSD)

For the navigation arrows we used the pixel perfect PSD provided by premiumpixels.com under
Simple Little Arrows (PSD)

Ok, so let’s get started!

The Markup

The HTML structure will be made up of the booklet plugin markup which includes the div with the id “mybook”. We will also add some navigation items and a loading element which we want to show while the content of the book is loading:

<div class="book_wrapper">

	<a id="next_page_button"></a>
	<a id="prev_page_button"></a>
	
	<div id="loading" class="loading">Loading pages...</div>
	
	<div id="mybook" style="display:none;">
		<div class="b-load">
		
			<div>
				<img src="images/1.jpg" alt=""/>
				<h1>Slider Gallery</h1>
				<p>This tutorial is about creating a creative gallery...</p>
				<a href="#" class="article">Article</a>
				<a href="#" class="demo">Demo</a>
			</div>
			
			<div>
				...
			</div>
			
		</div>
	</div>
</div>

Each page of the booklet will be placed in a div element inside of the element with the class “b-load”.
Since the plugin allows us to use custom buttons for flipping the pages, we will configure the plugin to use our arrow anchors.

Let’s take a look at the style.

The CSS

For the styling we will simply create a “skin” for the plugin, i.e. a stylesheet that will overwrite some style properties that come with the plugin stylesheet (so be sure to place it after the inclusion of our customization).

We will start by adapting the “booklet” class and giving it some shadow and rounded borders:

.booklet{
	-moz-box-shadow:0px 0px 1px #fff;
	-webkit-box-shadow:0px 0px 1px #fff;
	box-shadow:0px 0px 1px #fff;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

We want to add a background image to the left and the right page, so that it looks more like a real book:

.booklet .b-wrap-left{
	background:#fff url(../images/left_bg.jpg) no-repeat top left;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-topleft:10px;
	-moz-border-radius-bottomleft: 10px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}
.booklet .b-wrap-right{
	background:#efefef url(../images/right_bg.jpg) no-repeat top left;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

We will also style the page numbers and adding some decent top border:

.booklet .b-counter{
	bottom:10px;
	position:absolute;
	display:block;
	width:90%;
	height:20px;
	border-top:1px solid #ddd;
	color:#222;
	text-align:center;
	font-size:12px;
	padding:5px 0 0;
	background:transparent;
	-moz-box-shadow:0px -1px 1px #fff;
	-webkit-box-shadow:0px -1px 1px #fff;
	box-shadow:0px -1px 1px #fff;
	opacity:0.8;
}

In the HTML stucture, we added a wrapper around the booklet, so that we can use a moleskine background image:

.book_wrapper{
	margin:0 auto;
	padding-top:50px;
	width:905px;
	height:540px;
	position:relative;
	background:transparent url(../images/bg.png) no-repeat 9px 27px;
}

We want to add a hand-drawn line beneath the heading on each page:

.book_wrapper h1{
	color:#13386a;
	margin:5px 5px 5px 15px;
	font-size:26px;
	background:transparent url(../images/h1.png) no-repeat bottom left;
	padding-bottom:7px;
}

The paragraphs and the links will have the following style:

.book_wrapper p{
	font-size:16px;
	margin:5px 5px 5px 15px;
}
.book_wrapper a.article,
.book_wrapper a.demo{
	background:transparent url(../images/circle.png) no-repeat 50% 0px;
	display:block;
	width:95px;
	height:41px;
	text-decoration:none;
	outline:none;
	font-size:16px;
	color:#555;
	float:left;
	line-height:41px;
	padding-left:47px;
}
.book_wrapper a.demo{
	margin-left:50px;
}
.book_wrapper a.article:hover,
.book_wrapper a.demo:hover{
	background-position:50% -41px;
	color:#13386a;
}

We will give the images a slight touch by adding a light border with a white box shadow, creating a slightly engraved look:

.book_wrapper img{
	margin:10px 0px 5px 35px;
	width:300px;
	padding:4px;
	border:1px solid #ddd;
	-moz-box-shadow:1px 1px 1px #fff;
	-webkit-box-shadow:1px 1px 1px #fff;
	box-shadow:1px 1px 1px #fff;
}

The border color on the right page needs to be a little bit darker:

.booklet .b-wrap-right img{
	border:1px solid #E6E3C2;
}

For the navigation arrows we will use a sprites image that contains all four arrow types:

a#next_page_button,
a#prev_page_button{
	display:none;
	position:absolute;
	width:41px;
	height:40px;
	cursor:pointer;
	margin-top:-20px;
	top:50%;
	background:transparent url(../images/buttons.png) no-repeat 0px -40px;
}
a#prev_page_button{
	left:-30px;
}
a#next_page_button{
	right:-30px;
	background-position:-41px -40px;
}
a#next_page_button:hover{
	background-position:-41px 0px;
}
a#prev_page_button:hover{
	background-position:0px 0px;
}

The loading element will have rounded borders and be semi-transparent. We will position it absolutely on the right side of the book:

.loading{
	width:160px;
	height:56px;
	position: absolute;
	top:50%;
	margin-top:-28px;
	right:135px;
	line-height:56px;
	color:#fff;
	padding-left:60px;
	font-size:15px;
	background: #000 url(../images/ajax-loader.gif) no-repeat 10px 50%;
	opacity: 0.7;
	z-index:9999;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
}

And that was all the style! Let’s add some magic!

The JavaScript

In the jQuery we will simply call the plugin after all the images in the book are loaded. Check out all the options here:
Booklet jQuery Plugin Options

var $mybook 		= $('#mybook');
var $bttn_next		= $('#next_page_button');
var $bttn_prev		= $('#prev_page_button');
var $loading		= $('#loading');
var $mybook_images	= $mybook.find('img');
var cnt_images		= $mybook_images.length;
var loaded			= 0;
//preload all the images in the book,
//and then call the booklet plugin

$mybook_images.each(function(){
	var $img 	= $(this);
	var source	= $img.attr('src');
	$('<img/>').load(function(){
		++loaded;
		if(loaded == cnt_images){
			$loading.hide();
			$bttn_next.show();
			$bttn_prev.show();
			$mybook.show().booklet({
				name:               null,                            
				// name of the booklet to display in the document title bar
				width:              800,                             
				// container width
				height:             500,                             
				// container height
				speed:              600,                             
				// speed of the transition between pages
				direction:          'LTR',                           
				// direction of the overall content 
				// organization, default LTR, left to right, can be 
				// RTL for languages which read right to left
				startingPage:       0,                               
				// index of the first page to be displayed
				easing:             'easeInOutQuad',                 
				// easing method for complete transition
				easeIn:             'easeInQuad',                    
				// easing method for first half of transition
				easeOut:            'easeOutQuad',                   
				// easing method for second half of transition

				closed:             true,                           
				// start with the book "closed", will add empty 
				// pages to beginning and end of book
				closedFrontTitle:   null,                            
				// used with "closed", "menu" and "pageSelector", 
				// determines title of blank starting page
				closedFrontChapter: null,                            
				// used with "closed", "menu" and "chapterSelector", 
				// determines chapter name of blank starting page
				closedBackTitle:    null,                            
				// used with "closed", "menu" and "pageSelector", 
				// determines chapter name of blank ending page
				closedBackChapter:  null,                            
				// used with "closed", "menu" and "chapterSelector", 
				// determines chapter name of blank ending page
				covers:             false,                           
				// used with  "closed", makes first and last pages 
				//into covers, without page numbers (if enabled)

				pagePadding:        10,                              
				// padding for each page wrapper
				pageNumbers:        true,                            
				// display page numbers on each page

				hovers:             false,                            
				// enables preview pageturn hover animation, 
				// shows a small preview of previous or next page on hover
				overlays:           false,                            
				// enables navigation using a page sized overlay, 
				// when enabled links inside the content will 
				// not be clickable
				tabs:               false,                           
				// adds tabs along the top of the pages
				tabWidth:           60,                              
				// set the width of the tabs
				tabHeight:          20,                              
				// set the height of the tabs
				arrows:             false,                           
				// adds arrows overlayed over the book edges
				cursor:             'pointer',                       
				// cursor css setting for side bar areas

				hash:               false,                           
				// enables navigation using a hash string, 
				// ex: #/page/1 for page 1, will affect 
				// all booklets with 'hash' enabled
				keyboard:           true,                            
				// enables navigation with arrow keys 
				// (left: previous, right: next)
				next:               $bttn_next,          			
				// selector for element to use as click 
				// trigger for next page
				prev:               $bttn_prev,          			
				// selector for element to use as click 
				// trigger for previous page

				menu:               null,                            
				// selector for element to use as the menu area, 
				// required for 'pageSelector'
				pageSelector:       false,                           
				// enables navigation with a dropdown menu of pages, 
				// requires 'menu'
				chapterSelector:    false,                           
				// enables navigation with a dropdown menu of chapters, 
				// determined by the "rel" attribute, requires 'menu'

				shadows:            true,                            
				// display shadows on page animations
				shadowTopFwdWidth:  166,                             
				// shadow width for top forward anim
				shadowTopBackWidth: 166,                             
				// shadow width for top back anim
				shadowBtmWidth:     50,                              
				// shadow width for bottom shadow

				before:             function(){},                    
				// callback invoked before each page turn animation
				after:              function(){}                     
				// callback invoked after each page turn animation
			});
			Cufon.refresh(); // if you want to use cufon
		}
	}).attr('src',source);
});

For cufonizing the content in the book, we will add the following lines to the head of our HTML:

<script src="cufon/cufon-yui.js" type="text/javascript"></script>
<script src="cufon/ChunkFive_400.font.js" type="text/javascript"></script>
<script src="cufon/Note_this_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
	Cufon.replace('h1,p,.b-counter');
	Cufon.replace('.book_wrapper a', {hover:true});
	Cufon.replace('.title', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
	Cufon.replace('.reference a', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
	Cufon.replace('.loading', {textShadow: '1px 1px #000', fontFamily:'ChunkFive'});
</script>

And that’s all! We hope you liked this tutorial, enjoyed it and find it useful πŸ™‚

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 91

Comments are closed.
  1. This one is a nice one again πŸ™‚ The last one was a bit too much for me.
    Really nice tutorial

  2. This is pretty nice! Thanks for taking the time to customize my plugin. I haven’t seen to many examples of people using it yet, but this is one of the best so far. If I ever get around to adding a real-world example section to the site I will definitely list this one!

    – Will

    • Hello Will! Thanks a lot and thanks so much for the superb plugin! We are really glad that you like our customization πŸ™‚ ! Cheers, Mary Lou

  3. Hello, great tut, but i don’t understand 2 things,

    why you do that:

    $mybook_images.each(function(){
    […]
    $(”).load([…]);
    });

    You loop the whole images and inside you affect a function for each images, why ?

    And the second thing,

    .attr(‘src’,source);

    Why do you set the same src ? while you did it before :
    var source = $img.attr(‘src’);

    Thanks!

    • Hello freaknboy! Thank you.
      I want to preload all the images before showing the book, that’s the reason for the load call on every image.
      The source = $img.attr(“src”) only returns you the source of the image, it does not set anything.
      Hope it helps.
      Cheers, Mary Lou

  4. Actually, my english is too bad, and my questions were :

    why do you loop : $(”).load([…]); in the loop $mybook_images.each ? if there is 50 images, you loop 50 * 50 so 2500 πŸ™

    and why do you affect $(”)[…]..attr(β€˜src’,source); after looping ?

  5. I thought I had seen all of what you are capable then you give us a new graphic and code surprise gift , and I just can take my hat off and say awesome work, gentlemen!

  6. The correct title should be great moleskine notebook flip effect with jQuery, donΒ΄t you think so? (Its a joke). The effect is best seen in google Chrome instead of Firefox , thanks again …

  7. Really great. What is the license? is it ok to create a private webpage out of the demo? I am currently turning it into a wordpress-theme (just for fun)

  8. Hi Christoph, thanks! The jQuery booklet plugin by Will is licensed under MIT/GPL so there is no problem using it for your project. Cheers, ML

  9. Great script and tutorial. Is there any way to automatically start the page turning and go to the last page and then loop through continuosly?

  10. Mary Lou, please help me. I cannot enable hover effect unless I enable overlay, which will make disable the links. Is there any way I can do to keep both the hover effect and the links?

  11. sorry, Mary Lou, I figured that out. I enabled arrow, then enabled hover effect, and changed the arrows in booklet folder into transparent images to get the hover effect. Cheer Mary Lou for your customization.

  12. Hi,
    I’m using this for my portfolio @ webmechanic.ca but I can’t figure out the best way to calculate removing the left and right arrows at the beginning and end of the book.

    Any thoughts?

    Thanks
    B

  13. somebody just taking the rip out of this and making their own. people, create your own design and use this tutorial as a base, not rip the shit out of it, even the type-face and everything, except the background. duhhh

  14. Anyone else found this incredibly slow and unresponsive with internet explorer if so can anyone shed any light on to why? In Chrome firefox and safari this works fine but ie very very slow.

  15. hello can you give me the code without loding image ??

    my bbok show only the loading gif and i dont now why

  16. I love this! I’d like to use it on my site for testimonials but most of the testimonials are longer than will fit on one page. Is there a way to make it continue onto the next page in the book?

    Thank You.

  17. Hi,

    Nobody seams to think about the IE font easing issue whan doing any fasing function (resultng in IE rendered code in a filter decalration, really un wanted). In the booklet if the content is real text it becomes degraded.
    Their should have somewhere at the end, something like ” this.style.removeAttribute(‘filter’);
    ” in the plugin code

  18. Is there a way to turn of the image preloaded. My sites hangs with 3g and edge and I think it’s the preloading of the images.

    BUT SIMPLY A GREAT TUTORIAL!

  19. Hi Christoph,
    for leaving out the preloading for each image you basically just need lines 017 to 122 and get rid of the condition and “each” around. Hope it helps, cheers, ML

  20. Hi,

    I would like to know how to create a menu at the top of the book.
    I have to create a bible of characters…
    For example i have free characters and when i click on one of those, the book display directly this one…
    I’ve seen there is a function for it (menu and page selector) but i don t know how it works… sorry i am a webdesigner :D)
    Thank you mary Lou, this is a really great notebook

  21. How to make a direct page navigation couse when i call the booklet direct page navigation function it’s not working πŸ™

  22. I would like to know the browser compatibility of this design. can anyone confirm with me ?

  23. Hi, i want it to use for a restaurant menuecard.
    I use PDFs so.
    Embedded with the object-Tag it turns out fine with Firefox and Opera – but not under the IE!
    (When i disable “class=b-load” i can see the Menue-PDF – it is not a problem with the IE itself.
    You can help me with my problem?
    THX

  24. Hi,
    I would like to know how to fit a slideshow (like picasa slideshow) in the book. I tried different way but i got always the same output, my slideshow appears in all the page until the good one, above the text, any idea ?

  25. i want to add dropdown list which show list of chapter which is in book .. how can i achieve this..

  26. I see 1px line or background when 2nd page flip back to see cover.. is there any way to remove it?

  27. I have 50 pages in booklet, which has dynamic data, and want to load first 10 pages, to avoid user waiting time.. how can i do this? Please guide me guys I need help on urgent basis.

  28. Hi I must say that this is a great plug in I am new to jquery and I would like to know if it is possible to add some more controls to this plug-ing like a zoom control and maybe a chapter selection inside of the book.I would be most greatfull if somebody could help me with this,