plugmin_co_plugmin_demo_oneBook3d_examples_index_php

【jQuery】オシャレすぎる!WEB上に3Dアルバムを置けるoneBook3dプラグイン

2014.10.08   2233


これはやられた。
まさにWEB上に実写のアルバムを置ける感覚。
めくる動きもスムーズで写真や画像をかっこ良く見せたいギャラリーに持ってこいのプラグイン。


 

oneBook3dプラグインのオススメ/ポイント

  •   WEB上にそのまんまアルバムを置いたかのような圧倒的な3D感!
  •   画像ズーム出来たり、傾けたり、ビューモードにしたりエフェクトが豊富
  •   スマホでのフリック動作にも対応

oneBook3dプラグインのデモ


oneBook3dプラグインのページ


oneBook3dプラグインの使い方

それではoneBook3dプラグインの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

<div id="photobook"></div>

JavaScriptコード

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.onebook3d.min.js"></script>
<script>
$(function(){
    var imgArray = [
            ['./img/001.jpg','title1'],
            ['./img/002.jpg','title2'],
            ['./img/003.jpg','title3'],
            ['./img/004.jpg','title4'],
            ['./img/005.jpg','title5'],
            ['./img/006.jpg','title6'],
            ['./img/007.jpg','title7'],
            ['./img/008.jpg','title8']
        ];
    $('#photobook').onebook(imgArray,
            {
                startPage:1,  // 初期表示に何ページ目から見せるか default:1
                flip:'soft', // 'basic','soft' フリップアニメーション default:'basic'
                skin:'dark',  // 'light','dark' 裏表紙の色 default:'dark'
                bgDark:'#222222 url(./img/bg.jpg)', // 全画面表示の際の背景 skinの指定によってbgLightかbgDarkを指定。
                pageСolor:'#FFFFFF', // おそらくページ内背景だが、なぜか効かない default:'white'
                slope:0, // 0,1,2 アルバムの傾け具合 default:0
                border:25, // 写真画像の余白 default:30
                language:'en', // 'en','ru' 言語 default:'en'
                cesh:true // true,false キャッシュするかしないか default:true
            });
    });
</script>

プラグインへ一言

これはオシャレすぎる。

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております