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

View demo Download source

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

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:

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

View demo Download source

Previous:
Next:

Tagged with:

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 126

Comments are closed.
  1. 1

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

  2. 11

    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

  3. 14

    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

    • 15

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

  4. 16

    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?

  5. 18

    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. :-(

  6. 23

    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?

  7. 24

    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?

  8. 25

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

  9. 26

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

Comments are closed.