Bookリーダーアプリでアプリ上のページを雑誌や本をめくるような表現ができるを目にしたことがあると思います。
ここにjQueryプラグインである「turn.js」でWebアプリケーションでも容易に実現できます。
ここに試しに設置して検証してみます。
設置サンプル
- Top
- Prev
- Next
- Last
function.phpの編集
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// スクリプト(jQuery)読み込み // turn.jsをロードします。 function add_script(){ wp_enqueue_script('turn', get_template_directory_uri() . '/js/turns4/lib/turn.js', array('jquery'), '', true); } add_action( 'wp_enqueue_scripts', 'add_script' ); // 画像用のショートコード // WordPressのテーマの独自フォルダー内に画像を設置しました。 // その画像を都合のいいように出力するショートコードを作ってみました。 // 使い方は [timg "「画像ファイル名」"] function turnimg($atts) { return "<img src=\"". get_template_directory_uri() . "/img/turn/" . $atts[0] ."\">"; } add_shortcode('timg', 'turnimg'); |
記事上のHTMLソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// ショートコードで画像のリンクを取得して貼り付けます。 <div class="flipbook"> <div>[timg "memo0.jpg"]</div> <div>[timg "memo１.jpg"]</div> <div>[timg "memo2.jpg"]</div> <div>[timg "memo3.jpg"]</div> <div>[timg "memo4.jpg"]</div> <div>[timg "memo5.jpg"]</div> <div>[timg "memo6.jpg"]</div> </div> // ページ移動メニューの追加 <div id="pagemenu"> <ul> <li><span id="toTop"> Top</span></li> <li><span id="toPrev"> Prev</span></li> <li><span id="toNext"> Next</span></li> <li><span id="toLast"> Last</span></li> </ul> </div> |
turn() をJavascriptで設定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
jQuery(function($) { $(".flipbook").turn({ width:640, // オブジェクトの幅 height:320, // オブジェクトの高さ elevation: 50, gradients: true, // ページをめくるアニメーションの可否 autoCenter: true // 開始ページをセンターリングする。 }); // トップへ移動 $("#toTop").click(function(){ $(".flipbook").turn("page", 1); }) // 前のページへ移動 $("#toPrev").click(function(){ $(".flipbook").turn("previous"); }); // 次のページへ移動 $("#toNext").click(function(){ $(".flipbook").turn("next"); }); // 最後のページへ移動 $("#toLast").click(function(){ $(".flipbook").turn("page", 7); }) }); |