FullscreenBookBlock: How to Implement Page Flipping｜DAD UNION

In the past, we introduced page-flipping plugins:
How to Implement Page Flipping Like a Book Using Pageflip.js
This time, we’ll introduce another method for implementing a different style of page flipping.

Contents

CSS files to load for implementing page flipping
HTML structure for implementing page flipping
JavaScript code to implement FullscreenBookBlock page flipping
FullscreenBookBlock: Demo page with page flipping implemented
Source: Fullscreen Pageflip Layout with BookBlock

CSS files to load for implementing page flipping

* Load jquery.jscrollpane.custom.css, bookblock.css, and custom.css files. Modify as needed.

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

HTML structure for implementing page flipping

* 4 pages (#item1 to #item4) are prepared. You can flip through the pages using the left/right arrow keys (←, →), swipe gestures, or menu links. Modify as needed.

<div id="container" class="container">
<div class="menu-panel">
<h3>Click the left/right arrow keys (←, →), swipe left/right, or use menu links to flip pages.</h3>
<ul id="menu-toc" class="menu-toc">
  <li class="menu-toc-current"><a href="#item1">Page 1</a></li>
  <li><a href="#item2">Page 2</a></li>
  <li><a href="#item3">Page 3</a></li>
  <li><a href="#item4">Page 4</a></li>
</ul>
</div>

<div class="bb-custom-wrapper">
<div id="bb-bookblock" class="bb-bookblock">
  <div class="bb-item" id="item1">
    <div class="content">
      <div class="scroller">
        <h2>Page 1</h2>
        <p>This is the text for page 1.</p>
      </div>
    </div>
  </div>
  <div class="bb-item" id="item2">
    <div class="content">
      <div class="scroller">
        <h2>Page 2</h2>
        <p>This is the text for page 2.</p>
      </div>
    </div>
  </div>
  <div class="bb-item" id="item3">
    <div class="content">
      <div class="scroller">
        <h2>Page 3</h2>
        <p>This is the text for page 3.</p>
      </div>
    </div>
  </div>
  <div class="bb-item" id="item4">
    <div class="content">
      <div class="scroller">
        <h2>Page 4</h2>
        <p>This is the text for page 4.</p>
      </div>
    </div>
  </div>
</div>

<nav>
  <span id="bb-nav-prev">&larr;</span>
  <span id="bb-nav-next">&rarr;</span>
</nav>

<span id="tblcontents" class="menu-button">Menu</span>
</div>
</div>

JavaScript code to implement FullscreenBookBlock page flipping

* Load the following files: modernizr.custom.79639.js, jquery.min.js, jquery.mousewheel.js, jquery.jscrollpane.min.js, jquerypp.custom.js, jquery.bookblock.js, and page.js. Using Page.init(), the flipping functionality for the 4 pages (#item1 to #item4) is enabled.

<script src="js/modernizr.custom.79639.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.jscrollpane.min.js"></script>
<script src="js/jquerypp.custom.js"></script>
<script src="js/jquery.bookblock.js"></script>
<script src="js/page.js"></script>
<script>
$(function() {
Page.init();
});
</script>