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.

By Manoela Ilic in Playground on
BookBlock: A Content Flip Plugin
Demo Download

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>
	<div class="bb-item">
		<!-- ... -->
	</div>
	<div class="bb-item">
		<!-- ... -->
	</div>
	<div class="bb-item">
		<!-- ... -->
	</div>
	<!-- ... -->
</div>

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).

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

Options

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:

Find this project on Github

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

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

How to Code the K72 Marquee Hover Animation

SVG Overlay and Infinite Menu Background Animation

Experimental CSS-Only Carousels with Scroll-Driven Animations

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 129

Comments are closed.

  1. Excellent work! It should be fun combining this with a filtering to make a wonderful portfolio section.

  10. So, by using jQuery++, can you actually wire up the gallery to work on iPhone and iPad? So, instead of licking nav, can you swipe and go thru pages on the screen? If yes, what is needed to activate this feature? I don’t think you mentioned it anywhere.. Maybe I missed it

  11. Olá Pedro,
    Deparei-me com o novo artigo em iPad e ainda não consegui testar.
    O plugin usa css transformations ou o 3d é feito apenas com javascript?

    Abraço e parabéns plo artigo

    • Supostamente funciona no iPad.. pelo menos no meu funciona 🙂 Sim, as transformações são controladas pelo plugin. X

  12. Superb tutorial and a resource, however I’m facing a problem here. I’m adding multiple items inside individual divs with a class of “bb-item” but only the first two items show up in the book. What am I doing wrong?

  13. Really a nice work.
    Just a problem: demo3 doesn’t work with Opera.
    When on the central page the sliding layer doesn’t appear.
    Too bad. 🙁

  17. There’s seems to be a problem still that the plugin or CoDrop’s feature detection of choice (Modernizr, I can only assume?) incorrectly flags Chrome being unable to utilize 3D Transformation. I’ve noticed this has happened only with recent versions of Chrome I’ve attempted to use for the demos (using the latest version of Chrome right now).

    Did Chrome ‘deactivate’ 3D Transformation support in result to the new changes to the specification this July, or is it a problem outside of the browser, perhaps some flags (settings) conflicts, or something like what I’ve already mentioned?

  18. Great job!
    I want insert image in A4 format, but i don’t understand which class i need to edit. can you help me plaese?

  19. Hi Guys,

    LOVE this but I’m at my wits end trying to implement! I’ve used tutorials from here before and they’ve been perfect but I’ve never worked with jQuery before.

    I have used the index file for custom/demo 2 and placed it in my php file in wordpress on the page I’ve created in the right area. I’ve uploaded the necessary css files, js and images into the correct folders. The page displays with the correct grid layout and navigation but none of the book images display (although I can see they are loading correctly on the code with firebug). The navigation also doesn’t work.

    This site is under construction so i can’t give you a link but have I missed an important step? It seems the jquery itself isnt working but again checking the scripts in my code on firebug i can see they are pulling…it’s like it’s not “Activating”??? What have I missed? Something in my functions?

    Thank you!!!

  20. Really good work!!! But the provided source code didn’t work for me. I used your demo script for my project.

  21. Awesome Plugin, How to keep the settings on auto flip, As in content to flip automatically without clicking buttons?

  24. @Jason @Prashant Thanks guys! The autoplay option is now available! Just set “autoplay” to true (“interval” is 3 seconds by default).

    • I use Chrome “22.0.1229.79 m”, page flip effect work when I open demo webpage, but when I download demo source and put in my server use localhost, page flip effect does not work.

  30. This is absolutely amazing work! I love this plugin and can’t wait to find opportunities to use it!

  32. Looks really great! Could be a nice addition to say – an illustration portfolio – if one’s a book illustrator for example 🙂 Thank you for providing it!

  33. Hi, is beatiful! Is there a way to make the images or plugin bigger? actually the flip book is kind of small 🙂

  34. I love this plugin, but I have a ? I have a lot of pages, is there a way to make it “jump” back to page 1? Thanks

  36. This is a beauty! Is it possible to change it so its elastic? I’m good so far but having issues with the height in .bb-bookblock in styles.css. If i take away the value it seems like all of the functionality goes away.

  37. Very nice plugin. I could see this being in my portfolio website in the next year.
    Great work!!

  38. Nice plugin – but not well documented. I needed to know that it was dependent on jquery 1.8 (jquery 1.7 not good enough), and that some of the html element classes are required to be exactly as in the source. (I think bb-item was one – there may be others).

    It took me some effort to discover these things by myself.

  40. Love this tutorial as it is finally the best answer for what I am trying to achieve with my portfolio website. Currently it is under construction but I have provided a link to the development page. I have a tabbed content area (3 tabs) and I want to implement this gallery onto all three tabbed areas. I had success in geting it to display and function in the first tab. When you click through tabs 2 and 3 the images do not show up but everything else does. The Gallery buttons (which I changed the images and shape) display and function correctly (the rollover effects and current states). Note: there are more buttons than there are Gallery images, this is intentional as I was playing with the visual aesthetic. The quantity of buttons will eventually equal those of the Gallery Images.

    Can someone advise me of what to do? Much appreciation for any dvice.

    • 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 }
      Cheers

  42. 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.

    Thanks

    • 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;
      el.bookblock({
      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).

  43. 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.

  44. 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?

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

    I will appreciate any help…

    Thanks!

  46. 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 🙂

  50. 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!!