jquery.bookblock.jsを使って複数画像を本をめくる様な切替りで表示する方法｜DAD UNION

jquery.bookblock.jsを使って複数画像を本をめくる様な切替りで表示する方法をご紹介します。
過去にページめくり系プラグイン、
「FullscreenBookBlock：ページめくりを導入する方法」
「pageflip.js：本の様にページめくりを導入する方法」
「JavaScriptを使って本の様にページめくりを導入する方法【FlipboardPageLayout】」
をご紹介しましたが、今回は別パターンのページめくりを導入する方法をご紹介します。

Contents

jquery.bookblock.jsを使って複数画像を本をめくる様な切替りで表示するCSS記述
jquery.bookblock.jsを使って複数画像を本をめくる様な切替りで表示するHTML記述
jquery.bookblock.jsを使って複数画像を本をめくる様な切替りで表示するJavaScriptの記述
jquery.bookblock.jsを使って複数画像を本をめくる様な切替りで表示するデモページ
ソース元：BookBlock: A Content Flip Plugin | Codrops

jquery.bookblock.jsを使って複数画像を本をめくる様な切替りで表示するCSS記述

※bookblock.cssファイルを読み込みます。画像切替りエリア（.bb-bookblock）とナビゲーションリンク（.bb-custom-wrapper nav a）等のCSS記述です。必要に応じて変更して下さい。

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

jquery.bookblock.jsを使って複数画像を本をめくる様な切替りで表示するHTML記述

※画像切替りエリア（id=”bb-bookblock” class=”bb-bookblock”）とナビゲーションリンク（navタグ内）と切替り画像エリア（class=”bb-item”）内に5枚のjpg画像（1～5.jpg）を用意します。

<h1>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="#">＜ 前へ</a>
    <a id="bb-nav-next" href="#">次へ ＞</a>
    <a id="bb-nav-last" href="#">＞＞</a>
  </nav>
</div>

jquery.bookblock.jsを使って複数画像を本をめくる様な切替りで表示するJavaScriptの記述

※modernizr.custom.js、jquery.min.js（1.9.1）、jquerypp.custom.js、jquery.bookblock.jsファイルを読み込みます。

以下の様に処理を記述します。
config = {各タグの用途},
init = function() {
　　config.$bookBlock.bookblock( {オプション（速さ、切替り演出）} );
　　initEvents();
},
initEvents = function() {ナビゲーション、スワイプ、キーボードイベント処理};

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