BookBlock: A Content Flip Plugin

A jQuery plugin that will create a booklet-like component that let's you navigate through its items by flipping the pages.
BookBlock: A Content Flip Plugin

From our sponsor: Try Mailchimp today.

BookBlock is a plugin that can be used for creating booklet-like components that allow a “page flip” navigation. Any content can be used, such as images or text. The plugin transforms the structure only when needed (i.e. when flipping a page) and uses some overlays as shadow for the pages to create more realism.

We will be using jQuery++ by Bitovi which has some add-ons for jQuery (specifically, to add the swipe event).

The following structure will allow to add custom content in a wrapper with the class “bb-item”, which represents an open page (left and right side):

<div id="bb-bookblock" class="bb-bookblock">
	<div class="bb-item">
		<!-- custom content -->
	<div class="bb-item">
		<!-- ... -->
	<div class="bb-item">
		<!-- ... -->
	<div class="bb-item">
		<!-- ... -->
	<!-- ... -->

The plugin can be called like this:

$(function() {
	$( '#bb-bookblock' ).bookblock();


You also have to include the other scripts that are needed (see one of the demo files).


The following options are available:

// vertical or horizontal flip
orientation : 'vertical',

// ltr (left to right) or rtl (right to left)
direction : 'ltr',

// speed for the flip transition in ms.
speed		: 1000,

// easing for the flip transition.
easing		: 'ease-in-out',

// if set to true, both the flipping page and the sides will have an overlay to simulate shadows
shadows		: true,

// opacity value for the "shadow" on both sides (when the flipping page is over it).
// value : 0.1 - 1
shadowSides	: 0.2,

// opacity value for the "shadow" on the flipping page (while it is flipping).
// value : 0.1 - 1
shadowFlip	: 0.1,

// if we should show the first item after reaching the end.
circular	: false,

// if we want to specify a selector that triggers the next() function. example: '#bb-nav-next'.
nextEl		: '',

// if we want to specify a selector that triggers the prev() function.
prevEl		: '',

// If true it overwrites the circular option to true!
autoplay        : false,
// time (ms) between page switch, if autoplay is true. 
interval        : 3000,

// callback after the flip transition.
// page is the current item's index.
// isLimit is true if the current page is the last one (or the first one).
onEndFlip	: function( page, isLimit ) { return false; },

// callback before the flip transition.
// page is the current item's index.
onBeforeFlip: function( page ) { return false; }

The following public methods are available to use in combination with navigation elements:

  • $( ‘#bb-bookblock’ ).bookblock( ‘next’ )
  • $( ‘#bb-bookblock’ ).bookblock( ‘prev’ )
  • $( ‘#bb-bookblock’ ).bookblock( ‘jump’, position )
  • $( ‘#bb-bookblock’ ).bookblock( ‘first’ )
  • $( ‘#bb-bookblock’ ).bookblock( ‘last’ )

Check out the demos with different configurations:

The illustrations and photos used in the demos are by Kevin Howdeshell, majownik and Isaac Montemayor.

Tagged with:

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

Feedback 129

Comments are closed.
    • Thanks a lot! Works fine for me with Firefox 16.0.1 (both Mac and Windows).What exactly are you seeing? Cheers

    • @Pedro: Sorry I did edit the stylesheet, so I didn’t work. I fixed it already. But in Opera it doesn’t work. But I fixed it like this:
      if(Modernizr.csstransforms3d){ //Boobblock here }else{ //convert booklet }

  1. Hi, I’m trying to use the onEndFlip and onBeforeFlip and I’m a bit confused as to how to use them. I’m still new with jQuery in certain areas.

    onEndFlip : function( page, isLimit ) { return false; },

    Could you give an example of how to use this? I was trying to do something to like this:

    onEndFlip : function( page, isLimit ) { if ($('.slide3').css("display") == "block") { $(this).addClass('current-slide'); } return false; }

    I’m sure this is incorrect, but I’m just trying to get something to respond as a “current” slide/page.


    • Actually, I just tried removing ‘page, isLimit’ from the function() {} and it now seems to correctly identify the if I created above. What is the purpose of the ‘page’ and ‘isLimit’ in the function? Can you demonstrate its use?

    • The onEndFlip is triggered after a page flip. The “page” is the index of the flipped page (the bb-item element), and the isLimit is true if the flipped page is the last one. These might be useful or not. For instance, say you need to keep track of the current item being shown. You could have something like:

      var current = 0;
      onEndFlip : function(page){
      current = page;

      Hope it helps. Cheers, Pedro

    • The onBeforeFlip(page) is triggered before a page flip. The “page” is the index of the “current” page (the one which is about to flip).

  2. Great works! And my baby love it 🙂

    Just one thing is that seems it does not provide the support for mobile device? I mean I download the first demo, build it as a app by using PhoneGap 2.1(the newest version), and then install it into Samsung Galaxy III. The app can be opened, but the animation of truning page looks some strange. The first page truns from right to left, and then the second page appears suddenly. Do you know the reason or get a workaround?

    Thanks for your great work again!

    • BTW, just make tests on ipad and iphone (iOS 4.2 and 5.1 with PhoneGap 2.1). It works well. Seems the issue only appears in Andorid side.

  3. Is there a way to take the swpie action a step further and have it follow your touch movement like the Flipboard app? So that you get the visual response of the page ‘flipping’ as you move your finger across?

  4. Hi, I just want to ask if how to hide the Next/Previous button when in EndSlide/StartSlide…

    I will appreciate any help…


  5. This is a very lovely plugin! I have a question though- I made multiple gallery divs based on the demo 1 source code, and got the frames to show up. However, unless I change display:none in the class bb-item to something else, no image gets displayed other than the first gallery. If I change bb-item to display: block (for instance), then all other galleries display images, but image order gets messed up and the last image is displayed as the first image. Is there any way I could solve this problem? Thank you 🙂

  6. Working on integrating this into wordpress. So far it is there and it works in all browsers… but does not work in Firefox UNLESS I have firebug open.. ha ha lucky me.

    My code’s issue:
    I am porting the demo2 mockup- and you can click any nav button once- but after that, they are disabled! any idea?? AGain, as soon as I turn Firebug on, it works…

    thanks to the author – and to anyone with general jquery knoweldge that understands what’s going on and can share!!!

    Making this into a gift guide tool. GOTTA HURRY!!

  7. Hi Pedro,

    Thanks so much for your awesome plugin.

    I’m having some difficulty with the implementation though, I can setup the plugin no problem. But in the context of a responsive site, I’d like to call the fire the method on resize. I understand it’s recording the dimension and positioning the elements when the page first loads. Do you have any recommendations on how to perhaps call the plugin again on resize?

    I’d love to be able to figure this one out, so please do let me know!

    Thanks again for all your work, I owe ya a six pack.

    • Thanks for your feedback. I’ve updated the script (zip and github ) to be able to recalculate the element’s width on window resize. Let me know if that works fine for you, or if there’s something still missing.. Thanks! Pedro

  8. Hey Pedro, Great effect. Is there any way to do this so the pages flip vertically instead of side-to-side?
    Check out my page & art, and you’d understand what I’d love to do…

    Could I solicit your help in doing a up-down flipbook style slider like this?
    Many thanks,

  9. Hello.

    Fantastic Plugin! How would I implement a pause button in the navigation? Any help would be greatly appreciated.

  10. Hello

    This plugin is great, but so far it doesn’t work on IE 9 and Chrome.

    Is there any quick fix to this?