jQueryのOneBook3dを使ってページをめくりたいです
HTML、css、jQueryの初心者です。
会社からの指示でホームページを作成することになりました。
作成時間は業務時間外で休日を使うしかない状況です。
デザインはできたのですが、プログラムで大変苦戦しています。
メモの画像をjQueryの機能でページがめくれるようにしたいです。
以下の状況なのですが何も表示されません…
どうぞ宜しくお願いいたします。
■jsフォルダに入っているファイル
jquery.mousewheel.min.js
jquery.onebook3d-2.33.js
jquery-1.11.0.min.js
■CSSフォルダに入っているファイル
jquery-OneBook3d.css
内容
html,body{width:100%;margin:1px;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:16px; 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;}
■index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="ページをめくる">
<title>ページをめくる</title>
<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-2.33.js"></script>
</head>
<body>
<script>
function ($) {
var imgArray = [
['./img/img_001.jpg', 'title1'],
['./img/img_002.jpg', 'title2'],
['./img/img_003.jpg', 'title3'],
['./img/img_004.jpg', 'title4'],
['./img/img_005.jpg', 'title5'],
['./img/img_006.jpg', 'title6'],
['./img/img_007.jpg', 'title7'],
['./img/img_008.jpg', 'title8'],
['./img/img_009.jpg', 'title9'],
['./img/img_0010.jpg', 'title10'],
['./img/img_0011.jpg', 'title11']
];
$('#onebook3dSample').onebook(imgArray, {
startPage: 1,
flip: 'soft',
skin: 'dark',
bgDark: '#222222 url(./img/desktop.jpg)',
pageColor: '#FFFFFF',
slope: 0,
border: 25,
language: 'en',
cesh: true
});
};
</script>
</body>
</html>