Content Flip Plugin with jQuery and CSS3 - BookBlock

BookBlock is a Content Flip Plugin built with jQuery and CSS3 that allows you to flip any content like in a booklet.

Features:

• Page Flip navigation
• Supports flipping from right to left, left to right, bottom to top, etc
• Multiple instances on one page
• Keyboard and swipe navigation
• RTL support
• CSS3 transitions and transforms

Basic Usage:

1. Include required CSS file on the page

<link rel="stylesheet" type="text/css" href="css/bookblock.css" />

2. Create the HTML for the slider with page flip effects

<div id="bb-bookblock" class="bb-bookblock">
<div class="bb-item"> <a href="#"><img src="images/demo1/1.jpg" alt="image01"/></a> </div>
<div class="bb-item"> <a href="#"><img src="images/demo1/2.jpg" alt="image02"/></a> </div>
<div class="bb-item"> <a href="#"><img src="images/demo1/3.jpg" alt="image03"/></a> </div>
<div class="bb-item"> <a href="#"><img src="images/demo1/4.jpg" alt="image04"/></a> </div>
<div class="bb-item"> <a href="#"><img src="images/demo1/5.jpg" alt="image05"/></a> </div>
</div>
<nav> <a id="bb-nav-first" href="#" class="bb-custom-icon bb-custom-icon-first">First page</a> 
<a id="bb-nav-prev" href="#" class="bb-custom-icon bb-custom-icon-arrow-left">Previous</a> 
<a id="bb-nav-next" href="#" class="bb-custom-icon bb-custom-icon-arrow-right">Next</a> 
<a id="bb-nav-last" href="#" class="bb-custom-icon bb-custom-icon-last">Last page</a> 
</nav>

3. Example CSS

@font-face {
font-family: 'arrows';
src: url('../fonts/arrows/arrows.eot');
src: url('../fonts/arrows/arrows.eot?#iefix') format('embedded-opentype'),  url('../fonts/arrows/arrows.woff') format('woff'),  url('../fonts/arrows/arrows.ttf') format('truetype'),  url('../fonts/arrows/arrows.svg#arrows') format('svg');
font-weight: normal;
font-style: normal;
}
.bb-custom-wrapper {
width: 420px;
position: relative;
margin: 0 auto 40px;
text-align: center;
}
.bb-custom-wrapper .bb-bookblock {
box-shadow: 0 12px 20px -10px rgba(81,64,49,0.6);
}
.bb-custom-wrapper h3 {
font-size: 1.4em;
font-weight: 300;
margin: 0.4em 0 1em;
}
.bb-custom-wrapper nav {
width: 100%;
height: 30px;
margin: 1em auto 0;
position: relative;
z-index: 0;
text-align: center;
}
.bb-custom-wrapper nav a {
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
border-radius: 2px;
background: #72b890;
color: #fff;
font-size: 0;
margin: 2px;
}
.bb-custom-wrapper nav a:hover {
opacity: 0.6;
}
.bb-custom-icon:before {
font-family: 'arrows';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
font-size: 20px;
line-height: 30px;
display: block;
-webkit-font-smoothing: antialiased;
}
.bb-custom-icon-first:before, .bb-custom-icon-last:before {
content: "\e002";
}
.bb-custom-icon-arrow-left:before, .bb-custom-icon-arrow-right:before {
content: "\e003";
}
.bb-custom-icon-arrow-left:before, .bb-custom-icon-first:before {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
/* No JS */
.no-js .bb-custom-wrapper {
height: auto;
}
.no-js .bb-custom-content {
height: 470px;
}

4. Include necessary javascript files on the webpage

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="js/jquerypp.custom.js"></script> 
<script src="js/jquery.bookblock.js"></script> 

5. The javascript

<script>
var Page = (function() {

var config = {
$bookBlock : $( '#bb-bookblock' ),
$navNext : $( '#bb-nav-next' ),
$navPrev : $( '#bb-nav-prev' ),
$navFirst : $( '#bb-nav-first' ),
$navLast : $( '#bb-nav-last' )
},
init = function() {
config.$bookBlock.bookblock( {
speed : 800,
shadowSides : 0.8,
shadowFlip : 0.7
} );
initEvents();
},
initEvents = function() {

var $slides = config.$bookBlock.children();

// add navigation events
config.$navNext.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'next' );
return false;
} );

config.$navPrev.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'prev' );
return false;
} );

config.$navFirst.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'first' );
return false;
} );

config.$navLast.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'last' );
return false;
} );

// add swipe events
$slides.on( {
'swipeleft' : function( event ) {
config.$bookBlock.bookblock( 'next' );
return false;
},
'swiperight' : function( event ) {
config.$bookBlock.bookblock( 'prev' );
return false;
}
} );

// add keyboard events
$( document ).keydown( function(e) {
var keyCode = e.keyCode || e.which,
arrow = {
left : 37,
up : 38,
right : 39,
down : 40
};

switch (keyCode) {
case arrow.left:
config.$bookBlock.bookblock( 'prev' );
break;
case arrow.right:
config.$bookBlock.bookblock( 'next' );
break;
}
} );
};

return { init : init };

})();
</script>
<script>
Page.init();
</script>

---

This awesome jQuery plugin is developed by PEDRO BOTELHO. For more Advanced Usages, please check the demo page or visit the official website.