3月
14
2013

本をめくるようにコンテンツを表示できるjqueryのプラグイン「BookBlock」

An article by れあ Comments

本をめくるようにコンテンツを表示できるjqueryのプラグイン「BookBlock」です

とてもおもしろいギミックなので実装してみようと思ったんですがこれがまたうまく動かずかなり苦戦しました。。。
というわけで実装の覚え書きを残しておこうと思います～

はじめに

BOOKBLOCK:A CONTENT FLIP PLUGIN

まずは上記のリンク先より「DOWNLOAD SOURCE」をクリックしてソースファイルを落とします。

そして実装するサイトにそのままフォルダごとアップします。(一部ファイルだけでもOKですが私は面倒だしあとあと見返すときに便利なのでそのままアップしてます)

私が実装してみて読み込みが必要だったファイルですが、
jsファイルが
modernizr.custom.79639.js
jquerypp.custom.js
jquery.bookblock.js

cssファイルが
custom.css
style.css
の5つのファイルです。

実装してみよう(jsとcss読み込みと記述)

そいでは早速実装していきましょ～
まずはjsファイルとcssファイルを読み込みます

// ｊｓファイルの読み込みとコード記述
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script> 
<script type="text/javascript" src="js/jquerypp.custom.js"></script>
<script type="text/javascript" src="js/jquery.bookblock.js"></script>
<script type="text/javascript">
	$(function() {
		var Page = (function() {
			var config = {
					$bookBlock : $( '#bb-bookblock' ),
					$navNext : $( '#bb-nav-next' ),
					$navPrev : $( '#bb-nav-prev' ),
					$navJump : $( '#bb-nav-jump' ),
					bb : $( '#bb-bookblock' ).bookblock( {
						speed : 800,
						shadowSides : 0.8,
						shadowFlip : 0.7
					} )
				},
				init = function() {

					initEvents();
							
				},
				initEvents = function() {
					var $slides = config.$bookBlock.children(),
							totalSlides = $slides.length;
					// add navigation events
					config.$navNext.on( 'click', function() {

						config.bb.next();
						return false;

					} );

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

					config.$navJump.on( 'click', function() {
								
						config.bb.jump( totalSlides );
						return false;

					} );
							
					// add swipe events
					$slides.on( {

						'swipeleft'		: function( event ) {
								
							config.bb.next();
							return false;

						},
						'swiperight'	: function( event ) {
								
							config.bb.prev();
							return false;
									
						}
					} );

				};

				return { init : init };

		})();

		Page.init();

	});
</script>

jsの読み込み記述はこれで完了です。
jsのURLは各自修正してください。

ここで注意なのが読み込み順です。
jsの読み込む順序が違うと動かないです。
最初は他のjsと競合して動かないのかと思ってたのでここでだいぶんハマリました。。。

このコードの書き方はデモファイルのindex.htmlから取ってきてます。
公式では

$(function() {
    $( '#bb-bookblock' ).bookblock();
});

と書いてあったんですが、動作しなかったのでデモから引っ張ってきました。

次はcssを読み込みます。
htmlからじかに読み込むかcssファイルから読み込むかしてくださいね～

// cssから読み込む場合の記述
@import "../js/BookBlock/css/custom.css";
@import "../js/BookBlock/css/style.css";

// htmlから読み込む場合の記述
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />

実装してみよう(html記述)

次はhtmlの記述です。

<div id="bb-bookblock" class="bb-bookblock">
    <div class="bb-item">
        <!-- custom content -->
    </div>
    <div class="bb-item">
        <!-- custom content -->
    </div>
    ...
    ...
</div>

custom contentの場所に表示する画像などをいれていけばOKです。
あとはコンテンツの大きさにあわせstyle.cssとcustom.cssを修正していけば完了です

オプション

動作の細かな設定ができます。
設定できる項目は下記のとおりです。
speed：ページめくりのスピード
easing：アニメーションの種類
shadows：シャドウの有無
shadowSides：シャドウの不透明度
shadowFlip：反転してるページのシャドウの不透明度
perspective：奥行き
circular：最後のページの後に最初を表示
nextEl：nextのセレクタ
prevEl：prevのセレクタ
onEndFlip：ページめくりのアニメーション後のコールバック
onBeforeFlip：ページめくりのアニメーション前のコールバック

カスタマイズしてみた

無事BookBlockを実装できたのですが、一部気になるところがあったのでカスタマイズしてみました。
(カスタマイズと呼べるほどのものでもないですけどね。。。ｗ)

変更したのはボタンのところです。
デフォルトでは「戻る」と「次へ」と「最後のページ」になっていますが、漫画みたいにしたかったため最後のページはいらないし最初のページに戻るがほしかったので少し弄ってみました。
項目を増やすのは面倒だったので簡単に
「最後のページ」を「最初のページ」に戻るに変更しました～
やり方は、js読み込みで書いてある

config.$navJump.on( 'click', function() {
	
config.bb.jump( totalSlides );
return false;

のところの「(totalSlides)」を「(1)」にするだけです。
これでボタンを押すと最初の1枚目に戻ります。

コード的はこれでOKですが、表示されるボタンが前のままなので、
imagesフォルダの中の「nav_small.png」画像ファイルを修正します。
3つボタンが並んでるので、一番右を逆に向けて保存します。
これで一番右のボタンを押すと最初に戻るってのが実装できました～

一応実装してみたのがこっちのサイトです