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

「OneBook3d」の特徴

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

「OneBook3d」の導入手順

1. OneBook3dのダウンロードページ（オフィシャルサイト）にアクセスします。
   ⇒http://onebook3d.riadesign.ru/
2. ダウンロードしたファイルの内、必要となるのは以下の通りです。
   

   分類	ファイル名　or フォルダ名	パス	備考
   js	jquery-1.11.0.min.js	\oneBook3d\examples\js	jQuery本体
   js	jquery.mousewheel.min.js	\oneBook3d\examples\js
   js	jquery.onebook3d.min.js	\oneBook3d\examples\js
   画像	bg.jpg	\oneBook3d\examples\g06	全画面表示する際の背景用画像

3. サンプルソース「HTML」
   
   XHTML

   <link rel="stylesheet" type="text/css" href="./css/jquery-OneBook3d.css"/> <script type="text/javascript" charset="utf-8" src="./js/jquery-1.11.0.min.js"></script> <script type="text/javascript" charset="utf-8" src="./js/jquery.mousewheel.min.js" ></script> <script type="text/javascript" charset="utf-8" src="./js/jquery.onebook3d.min.js" ></script> <script type="text/javascript" charset="utf-8" src="./js/OneBook3d_sample.js" ></script>

   1 2 3 4 5

   <link rel="stylesheet" type="text/css" href="./css/jquery-OneBook3d.css"/> <script type="text/javascript" charset="utf-8" src="./js/jquery-1.11.0.min.js"></script> <script type="text/javascript" charset="utf-8" src="./js/jquery.mousewheel.min.js" ></script> <script type="text/javascript" charset="utf-8" src="./js/jquery.onebook3d.min.js" ></script> <script type="text/javascript" charset="utf-8" src="./js/OneBook3d_sample.js" ></script>

   
   
   XHTML

   <div id="onebook3dSample"></div>

   1	<div id="onebook3dSample"></div>

4. サンプルソース「CSS」
   スタイルシートはダウンロードするとHTML内に直接記述されていますが、下記コードをCSSファイルに外部ファイル化する事をお勧めします。
   
   CSS

   html,body{width:100%;margin:0px;padding:0px;background:#cccccc;color:#000000;min-width:800px;} body * { -webkit-tap-highlight-color: rgba(0,0,0,0); } .links a:link,.links a:visited{color:black;text-decoration:none;font:15px sans-serif;} .links a:hover{color:black;text-decoration:underline;} .headtitle p{text-align:center;margin:0px;padding:20px;font:16px sans-serif;line-height:140%;} .headtitle2 p{text-align:center;margin:0px;padding:20px;font:13px sans-serif;line-height:140%;} .address{margin:0px auto 50px auto;padding:0px;width:800px;text-align:center;} .address, .address a{font:13px arial, sans-serif;color:black;}

   1 2 3 4 5 6 7 8

   html,body{width:100%;margin:0px;padding:0px;background:#cccccc;color:#000000;min-width:800px;} body * { -webkit-tap-highlight-color: rgba(0,0,0,0); } .links a:link,.links a:visited{color:black;text-decoration:none;font:15px sans-serif;} .links a:hover{color:black;text-decoration:underline;} .headtitle p{text-align:center;margin:0px;padding:20px;font:16px sans-serif;line-height:140%;} .headtitle2 p{text-align:center;margin:0px;padding:20px;font:13px sans-serif;line-height:140%;} .address{margin:0px auto 50px auto;padding:0px;width:800px;text-align:center;} .address, .address a{font:13px arial, sans-serif;color:black;}

5. サンプルソース「jQuery」
   
   JavaScript

   jQuery(function($) { var imgArray = [ ['./img/sample_img_001.jpg','title1'], ['./img/sample_img_002.jpg','title2'], ['./img/sample_img_003.jpg','title3'], ['./img/sample_img_004.jpg','title4'], ['./img/sample_img_005.jpg','title5'], ['./img/sample_img_006.jpg','title6'], ['./img/sample_img_007.jpg','title7'], ['./img/sample_img_008.jpg','title8'], ['./img/sample_img_009.jpg','title9'], ['./img/sample_img_010.jpg','title10'] ]; $('#onebook3dSample').onebook(imgArray, { startPage:1, flip:'soft', skin:'dark', bgDark:'#222222 url(./img/bg.jpg)', pageColor:'#FFFFFF', slope:0, border:25, language:'en', cesh:true }); });

   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 26

   jQuery(function($) { var imgArray = [ ['./img/sample_img_001.jpg','title1'], ['./img/sample_img_002.jpg','title2'], ['./img/sample_img_003.jpg','title3'], ['./img/sample_img_004.jpg','title4'], ['./img/sample_img_005.jpg','title5'], ['./img/sample_img_006.jpg','title6'], ['./img/sample_img_007.jpg','title7'], ['./img/sample_img_008.jpg','title8'], ['./img/sample_img_009.jpg','title9'], ['./img/sample_img_010.jpg','title10'] ];   $('#onebook3dSample').onebook(imgArray, { startPage:1, flip:'soft', skin:'dark', bgDark:'#222222 url(./img/bg.jpg)', pageColor:'#FFFFFF', slope:0, border:25, language:'en', cesh:true }); });

6. 指定可能なオプション
   

   オプション	デフォルト値	説明
   startPage	1	初期表示に何ページ目から表示するか指定します。
   flip	'basic'	フリップアニメーション ・'basic' or 'soft'
   skin	'dark'	裏表紙の色 ・'light' or 'dark'
   bgDark		全画面表示する際の背景を指定します。
   pageColor	white	ページカラー
   slope	0	アルバムの傾け具合 ・0,1,2
   border	30	写真画像の余白
   language	en	言語を指定します ・en or ru
   cesh	true	キャッシュの有無を指定シます ・true ：キャッシュします ・false：キャッシュしません