jquery.bookblock.jsで本のページめくり風に複数画像を表示する方法

今回は、「jquery.bookblock.js」を使用して、複数の画像を本のページをめくるような切替りで表示する方法をご紹介します。
以前ご紹介したページめくり系プラグインとしては、

「FullscreenBookBlock：ページめくりを導入する方法」
「pageflip.jsを使って本の様にページめくりを導入する方法」
「JavaScriptを使って本の様にページめくりを導入する方法【FlipboardPageLayout】」

がありますが、今回はこれらとは異なる新しい方法を解説します。

必要な準備

まずは、必要なファイルを準備します。

• modernizr.custom.js
• jquery.min.js（バージョン1.9.1）
• jquerypp.custom.js
• jquery.bookblock.js
• bookblock.css

　
これらのファイルをダウンロードして、適切な場所に配置してください。

CSSの記述

bookblock.cssファイルを読み込みます。画像切替りエリア（.bb-bookblock）とナビゲーションリンク（.bb-custom-wrapper nav a）等のCSS記述です。以下にサンプルの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>

HTMLの記述

次に、HTMLを作成します。画像切替りエリア（id=”bb-bookblock” class=”bb-bookblock”）とナビゲーションリンク（navタグ内）を用意し、切替り画像エリア（class=”bb-item”）内に5枚の画像（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>

JavaScriptの記述

最後に、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>

jquery.bookblock.jsを使って複数画像を本をめくる様な切替りで表示するデモページ

実際のデモページを以下のリンクからご覧ください。

jquery.bookblock.jsを使って複数画像を本をめくる様な切替りで表示するデモページ

ソース元：BookBlock: A Content Flip Plugin | Codrops

BookBlock: A Content Flip Plugin | Codrops

まとめ

「jquery.bookblock.js」を使用することで、複数の画像を本のページをめくるような効果で切り替えることができます。このプラグインは、ナビゲーションリンクやスワイプ操作、キーボード操作に対応しており、直感的な操作が可能です。ぜひ、自分のプロジェクトで活用してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。