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:
- Demo 1: Default configuration with navigation examples
- Demo 2: Horizontal flipping
- Demo 3: RTL Support (right-to-left support)
- Demo 4: Fullscreen example
- Demo 5: Multiple instances with dots navigation
The illustrations and photos used in the demos are by Kevin Howdeshell, majownik and Isaac Montemayor.
Also, can I modify the plugin so it opens on both sides (so page flip effect on right and left side). Just think about it as a folder
with 2 flaps, one on each side.
Thanks in advance
Is it possible to use the pluggin such that, the pages flip vertically as opposed to horizontally ?
Hi,
Dear Bro…it is awesome….i am searching for the page flip at last i got it the code ,thanks a lots dear….bro….
Can you help me my requirement is the page flip with text search in page ,…please say me how to do it or if you have some sample can you upload it ….so that it would help me a lot….thanks in advance
I used this plugin for a website I am working on at my office. Check it out: http://www.saveonenergy.com/energy-savings-story/
I used it to create a fully responsive, web-based children’s book. Thanks!
nice plugin,,
but this plugin doesn’t work on IE ?
hello! nice plugin!
i have problems building a navigation. every link should open its div. i tried this but its not working:
$('#page3').click(function(){config.bb.jump(3);
});
any sugestions how to build a normal navigation? thanks!
got it! :-)
Could you share your solution ?
Thanks
Yes, please tell what you did.
i put your plugin on a website but with every “flip” the background image disappear for a second. do you have an idea why it’s like that?
this ist the link:
http://bigblackline.com/_temp/yogabirds/inhalte.html
thank you!
could solve the problem. now its working fine.
is it possible to deactivate the flip animation in IE9 because it dosnt look good in this browser?
i mean IE10. looks bad in it the transformation even got the csstransforms3d class
Done.
Great work!
Hi there! It’s an excelente plugin, is there any chance that this could use “-webkit-transform” for the 3D transformation so its compatible with Chrome ? Thanks !
The demos are compatible with Chrome. You don’t see the 3D effect?
How do you do this! :O Great work!
Looks good but doesn’t show the flip in IE 9 or IE 10. Is there any way to fix that?
Thank you!
Nice!! Fresh air in the plugins world.
Thanks for sharing.
Is it possible to not have the page attempt to flip when someone is on the first page or the last page?
with the new version my old code is not working anymore. i am trying to build an own navigation:
var config = {
$bookBlock : $( '#bb-bookblock' ),
$navNext : $( '#bb-nav-next' ),
$navPrev : $( '#bb-nav-prev' ),
$navFirst : $( '#bb-nav-first' ),
$navLast : $( '#bb-nav-last' ),
$navJump : $( '#bb-nav-jump' ),
bb : $( '#bb-bookblock' ).bookblock( {
speed : 800,
shadowSides : 0.8,
shadowFlip : 0.7
} )
}
....
$('.page3').click(function(){
config.bb.jump(3);
});
the console tell me this:
Uncaught TypeError: Object [object Object] has no method ‘jump’
in my old version works fine. like here:
Yoga
got it!
$('.page3').click(function(){
config.bb.bookblock('jump', 3);
});
How i can deactivate the option when we drag the mouse and that change the page?
Thanks for this awesome work!
If I wanted to use this as a catalog, what format can I use to make links to bookmark sections?
Hi! Great plugin!
Is it possible to make it work for IE10 and Opera?
just used this on a blog i just created.. http://www.firstcamepizza.com
I am trying to add trivia questions to each page. When the user clicks and answer the page will turn and they will see the results on the one side and see a new question on the other side of the page. I added <a href=”#” rel=”nofollow”> to all the answer options so the page turns when the user clicks the answer but it only works with the first answer option. I don’t have much experience with jQuery and looking for some help.
Thank you
I added the link with the id of bb-nav-next and class of bb-custom-icon bb-custom-icon-arrow-right