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

Feedback 126

Comments are closed.
  1. 1

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

  2. 4

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

    • 10

      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.

  3. 13

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

  4. 15

    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!

  5. 16

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

  6. 18

    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

  7. 20

    Fantastic plugin! Is there any way to change the direction of the animation to vertical?

  8. 22

    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.

  9. 23

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

  10. 24

    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.

  11. 26

    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.

Comments are closed.