46809


HTML、css、jQueryの初心者です。  
会社からの指示でホームページを作成することになりました。  
作成時間は業務時間外で休日を使うしかない状況です。  
デザインはできたのですが、プログラムで大変苦戦しています。  
メモの画像をjQueryの機能でページがめくれるようにしたいです。  
以下の状況なのですが何も表示されません…  
どうぞ宜しくお願いいたします。

■jsフォルダに入っているファイル  
jquery.mousewheel.min.js  
jquery.onebook3d-2.33.js  
jquery-1.11.0.min.js

■CSSフォルダに入っているファイル  
jquery-OneBook3d.css

内容

[code]

    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;}
    
[/code]

■index.html

[code]

    <!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>
    
[/code]


CC BY-SA 4.0
2018-07-21T08:23:38.833
46803
2018-07-21T10:08:10.017
2018-07-21T09:59:50.450
29323
question
html jquery css
jQueryのOneBook3dを使ってページをめくりたいです


> 以下の状況なのですが何も表示されません…

以下の3点に誤りがあるのではと思います。

  * three.min.jsの読み込みが抜けている。

`<script type="text/javascript" src="./js/three.min.js"></script>`

  * onebookを表示する要素(`<div id="onebook3dSample"/>`)が抜けている。

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

  * jqueryの初期処理の呼出方法が誤っている。

`$(function () { //..略... });`

修正版は以下になると思います。

[code]

    <!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" src="./js/three.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="./js/jquery.onebook3d-2.33.js"></script>
      </head>
      <body>
        <div id="onebook3dSample"></div>
    
        <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>
    
[/code]


CC BY-SA 4.0
2018-07-21T10:08:10.017
46809
2018-07-21T10:08:10.017
46803
answer