By Sam Deering

Amazing jQuery Notebook Page Flip Animation

By Sam Deering

Everyday jQuery is getting more and more popular because of it’s usefulness, flexibility and speed. This notebook animation style like “flash page layout” page flip animation is an excellent example of these competencies. This fancy jQuery Notebook skin uses a jQuery animation plugin called jQuery Booklet Plugin.

Pro’s of the jQuery Notebook Animation

  • Lightweight (only 17kb minified version)
  • Easy to install with sliding divs for pages
  • Very smooth page flip animation and life like page effect


View Demo


How to Install

  1. Download the jQuery MoleSkine Notebook Package
  2. Add the HTML below (add a div with class “b-load” for each page)
  3. Edit the CSS styles to suit your needs
  4. Edit the Booklet JS options to tweak the page animaton

jQuery Moleskine Package Includes:


Loading pages...


  • One of the best jQuery plugins I’ve seen in a long time. This is very easy to implement.

  • Wow… Now this is a great a powerful plugin!

    Very impressed!

  • Beautiful, just the jquery effect i was looking for. Going to use in my next project for sure. Thanks a lot.

  • Not work in ie -9

    • It won’t work in IE 9 when the ‘hash’-option is set to true.
      The error occurs because there is a bug in jquery.booklet.1.1.0.js on line 478:

      clearInterval() is called without it’s NOT optional parameter. It seams that all other browsers ignore this error and work around it, but not IE 9 :-/
      So, to resolve this error add a global variable to save the interval reference:

      ;(function($) {

      var mybookletInterval = false;

      $.fn.booklet = function(options){

      Then replace the code on line 478

      setInterval(function(){pollHash()}, 250);

      with this code:

      mybookletInterval = setInterval(function(){pollHash()}, 250);

      After that the script worked for me in ID 9, too.

  • Julie

    Love this plugin. Anyone know how I could make it start over automatically once it gets to the last page?

    • jquery4u


      I just had a peek at the code and there is a gotoPage() function. But i had a go and it’s not playing ball.

      Here is my attempt.

      //add the link
      $(‘body’).append(‘Go to Page 1‘);

      //add the click event
      $(‘#gotoPage1’).live(‘click’, function(e)
      $.booklet.gotoPage(1); //go to beginning

      If this was working it would animate the pages flipping backwards.

      Sorry I couldn’t get it working, when i get a spare sec i’ll have another go!


  • Great plugin, thanks for sharing. I have a small problem though. I am trying to get this to work in conjunction with Lightbox so the user can click each page and it will enlarge in the usual Lightbox way.

    It appears to not work though, does anyone know if using this with another plugin is supported? I suspect the different Javascript files conflicting. Here is my implementation:

  • Mohan

    Can we do a data bound aspx forms like the flip style instead of tab or something?

  • Hi,

    is it possible to use the whole page for the images?


  • thanx for jquery instead of heavy flash

  • Phoenix

    Really nice code, but how I wish this were responsive. Without being responsive, this is a bit like eye candy.

  • Rakin

    I liked but I prefer looks better.

  • Pingback: 8 jQuery Book Plugins | jQuery4u()

  • Arvind Dubey

    how to call onclick

  • Pingback: 20+ Powerful jQuery Flipbook Plugins()

  • Pingback: 20+ Powerful jQuery Flipbook Plugins | Good Favorites()

  • Pingback: Fresh and Useful Collection of JQuery Plugins | Web Design Burn()

  • Pingback: 20+ Powerful jQuery Flipbook Plugins - TechBlog()

  • Pingback: Awesome jQuery Flipbook / Magazine Plugins -

  • Retno

    impressive. Good idea! :)

Get the latest in JavaScript, once a week, for free.