「駑馬十駕」 IT系情報を中心に調べた事をコツコツ綴っています。

WEB上でフォトアルバムを再現出来るjQueryプラグイン「OneBook3d」の利用方法をご紹介します。

「OneBook3d」の特徴

  • WEB上に非常にオシャレなフォトアルバムを設置することが出来ます。
  • 画像をズームしたり、傾けたり、ビューモードなどのエフェクトが豊富です。
  • スマホでのフリック動作にも対応しています。

「OneBook3d」の導入手順

  1. OneBook3dのダウンロードページ(オフィシャルサイト)にアクセスします。
    http://onebook3d.riadesign.ru/
  2. ダウンロードしたファイルの内、必要となるのは以下の通りです。
    分類ファイル名 or フォルダ名パス備考
    jsjquery-1.11.0.min.js\oneBook3d\examples\jsjQuery本体
    jsjquery.mousewheel.min.js\oneBook3d\examples\js
    jsjquery.onebook3d.min.js\oneBook3d\examples\js
    画像bg.jpg\oneBook3d\examples\g06全画面表示する際の背景用画像
  3. サンプルソース「HTML」

  4. サンプルソース「CSS」
    スタイルシートはダウンロードするとHTML内に直接記述されていますが、下記コードをCSSファイルに外部ファイル化する事をお勧めします。
  5. サンプルソース「jQuery」
  6. 指定可能なオプション
    オプションデフォルト値説明
    startPage1初期表示に何ページ目から表示するか指定します。
    flip'basic'フリップアニメーション
    ・'basic' or 'soft'
    skin'dark'裏表紙の色
    ・'light' or 'dark'
    bgDark全画面表示する際の背景を指定します。
    pageColorwhiteページカラー
    slope0アルバムの傾け具合
    ・0,1,2
    border30写真画像の余白
    languageen言語を指定します
    ・en or ru
    ceshtrueキャッシュの有無を指定シます
    ・true :キャッシュします
    ・false:キャッシュしません

Ads by Google

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">