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

    Hey mate, really great tuto… E como vi você falando português…

    Estou com um problema que não achei solução ainda, gostaria de inserir uma barra de scroll para as paginas com maior texto, porem não estou conseguindo fazer funcionar, tentei usar o jquery.scrollpane mas não consegui… e como estou engatinhando nessa parte de integrar CSS e Jquery apreciaria muito a ajuda…

    I have a problem I did not find solution yet, I would like to insert a scroll bar for pages with more text, however I am not able to make it work, tried using jquery.scrollpane but could not … I’m a little green on CSS and Jquery, sooooooo any help will be great :)

  2. 4

    This is a sweet plugin – great job. I’m trying to get it to be responsive but running into some bugs. First of all, is it possible to do this with how the plugin is setup? Here’s what I have so far: davelassanske.com/bookblock/

    Thanks!

  3. 5

    First, I would like to say the plugin is great!!!

    I have a problem using it:
    It’s weird. I’m using the plugin with image generated with PHP and there is a flickering before the animation.
    I’ve found it’s because of the “_layout” function which call this line:
    this.$items.hide();

    if I’m using a real image (e.g. http://www.mysites.com/images/1.jpg) => it works fine… the line this.@items.hide() won’t really hide the “bb-item” item…
    But if I’m using a PHP script to generate the image (e.g. http://www.mysites.com/images/1.php) => it starts to flicker before the animation…

    Do you have any idea?

    Many thanks!
    Puffnir.

  4. 6

    Bom dia,

    Gostaria de saber se há algum ajuste para que o flip funcione no IE, e/ou alguma previsão para sair uma correção para que funcione.

    Obrigado.

  5. 7

    It would be really, really helpful if you could show an example of dots navigation being used with arrow navigation. I’m not very good with jquery and your script structure for the dots examples if very different to the rest of the examples – so I have been unable to integrate despite numerous attempts! Thank you for the brill plug-in anyway!

  6. 10

    It’s good but useless if recharged every image in safari and IE is not
    would be good to indicate this at first to keep working while investigating a solution

    regards

  7. 11

    This plugin is great and has been a huge help in a project I’m working on – one question, I would like to be able to have a horizontal flip that goes from top to bottom instead of bottom to top. The default doesn’t have that option so I tried playing around with the transition effects in the CSS but I couldn’t get it to look right. I know there must be some combination of changes to the rotation and position that make it go the way I want, but so far my changes cause the images to jump out of place, or the top and bottom switch places, or other weird effects.

    What would I need to change in order to reverse the direction of the horizontal flip?

    Thanks so much!

    • 12

      I found an answer to my own question – in jquery.bookblock.js, I changed the startSlideshow function. Changing the line that says “self._navigate( ‘next’ );” to “self._navigate( ‘prev’ );” gave me the behavior I was looking for, and now my slideshow items flip from the top to bottom instead of the other way around.

      This might be a good place for a config option, but I hope this trick helps anyone else who has this question.

      Thanks again for the awesome plugin!

  8. 13

    thank you so much for this great tutorial. i have red the comments but i’m not shure wether ie10 is fully supported or not :/ although ie10 claims to be cool with css 3d transitions it seems not to animate the pages? is there any way to make this work? unfortunately my windows pc refuses to update the ie browser, so this was just what i heard from a friend. thank you for a quick answer!

    kind regards from germany

  9. 15

    This is one of the better ones. However, not working with IE ?! That pretty much makes it useless doesn’t it.
    Perhaps I’m being unfair. Are we meant to develop it further ourselves to make it cross-browser compatible? Shouldn’t it be in Github if that is the case?

Comments are closed.