【jQuery】 BookBlock

本をめくるようなUIのjQuery


デモ
http://tympanus.net/Development/BookBlock/index.html



ダウンロード
http://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/




※覚書

表示したい場所にdivで画像を囲む

<div class="bb-custom-wrapper">
<div id="bb-bookblock" class="bb-bookblock">
<div class="bb-item"><img class="alignnone size-full" src="/img1.jpg" alt="free1"  /></div>
<div class="bb-item"><img class="alignnone size-full" src="/img2.jpg" alt="free2"  /></div>
<div class="bb-item"><img class="alignnone size-full" src="/img3.jpg" alt="free3"  /></div>
</div>

<nav>
<a id="bb-nav-first" class="bb-custom-icon bb-custom-icon-first" href="#">First page</a>
<a id="bb-nav-prev" class="bb-custom-icon bb-custom-icon-arrow-left" href="#">Previous</a>
<a id="bb-nav-next" class="bb-custom-icon bb-custom-icon-arrow-right" href="#">Next</a>
<a id="bb-nav-last" class="bb-custom-icon bb-custom-icon-last" href="#">Last page</a></nav></div>


＝＝＝＝＝＝


【コンソールエラー　jquery is not defined　が出た時の対処】

scriptファイルの読み込ませる順番を変えた。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/js/modernizr.custom.js"></script>
<script src="/js/jquerypp.custom.js"></script>
<script src="/js/jquery.bookblock.js"></script>