This time, we will introduce how to use “jquery.bookblock.js” to display multiple images with a book page-turning style transition.
As previously introduced page-turning plugins:
「FullscreenBookBlock: How to Implement Page Flipping」
「How to Implement Page Flipping Like a Book Using Pageflip.js」
「How to Implement Book-Like Page Flipping Using JavaScript [FlipboardPageLayout]」
This time, we will explain a new method that differs from those.
Preparation Required
First, prepare the necessary files.
- modernizr.custom.js
- jquery.min.js (version 1.9.1)
- jquerypp.custom.js
- jquery.bookblock.js
- bookblock.css
Download these files and place them in the appropriate locations.
CSS Description
Load the bookblock.css file. Below is sample CSS for the image switching area (.bb-bookblock) and the navigation links (.bb-custom-wrapper nav a).
<link rel="stylesheet" type="text/css" href="bookblock.css" />
<style>
body {
font-size: 16px;
text-align: center;
}
h1{
text-align: center;
font-size: 20px;
line-height: 1.6em;
padding: 20px 0;
}
.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);
width: 300px;
height: 300px;
}
.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;
text-align: center;
margin: 2px;
padding: 5px;
text-decoration: none;
color: #000000;
font-weight: bold;
}
.bb-custom-wrapper nav a:hover {
opacity: 0.6;
}
</style>
HTML Description
Next, create the HTML. Prepare the image switching area (id=”bb-bookblock” class=”bb-bookblock”) and the navigation links (inside the nav tag). Place five images (1–5.jpg) inside the switching area (class=”bb-item”).
<h1>Display Multiple Images with a Book Page-Turning Effect Using jquery.bookblock.js</h1>
<div class="bb-custom-wrapper">
<div id="bb-bookblock" class="bb-bookblock">
<div class="bb-item">
<img src="1.jpg" alt="1" width="300"/>
</div>
<div class="bb-item">
<img src="2.jpg" alt="2" width="300"/>
</div>
<div class="bb-item">
<img src="3.jpg" alt="3" width="300"/>
</div>
<div class="bb-item">
<img src="4.jpg" alt="4" width="300"/>
</div>
<div class="bb-item">
<img src="5.jpg" alt="5" width="300"/>
</div>
</div>
<nav>
<a id="bb-nav-first" href="#">＜＜</a>
<a id="bb-nav-prev" href="#">＜ Previous</a>
<a id="bb-nav-next" href="#">Next ＞</a>
<a id="bb-nav-last" href="#">＞＞</a>
</nav>
</div>
JavaScript Description
Finally, write the JavaScript. Load the required libraries: modernizr.custom.js, jquery.min.js (1.9.1), jquerypp.custom.js, jquery.bookblock.js, then configure the page-flipping functionality.
Write the process as follows:
config = {Usage of each element},
init = function() {
config.$bookBlock.bookblock({Options such as speed and transition effect});
initEvents();
},
initEvents = function() {Navigation, swipe, and keyboard event handling};
<script src="modernizr.custom.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquerypp.custom.js"></script>
<script src="jquery.bookblock.js"></script>
<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>
Demo Page: Display Multiple Images with a Book Page-Turning Effect Using jquery.bookblock.js
You can view the actual demo page from the link below.
Demo Page: Display Multiple Images with a Book Page-Turning Effect Using jquery.bookblock.js
Source: BookBlock: A Content Flip Plugin | Codrops
BookBlock: A Content Flip Plugin | Codrops
Summary
Using “jquery.bookblock.js,” you can switch multiple images with a book-like page-turning effect.
This plugin supports navigation links, swipe gestures, and keyboard operations, allowing intuitive interaction.
Feel free to use it in your own project.
※ If you reuse this code, please do so at your own risk.
Please do not reuse the Google Analytics tag inside the head tag of the demo page.
