46651


以下プログラム内の、p.noteの画面いっぱいに表示されている画像の上に  
#flipbookというページがめくれる効果をもつノートを中央に表示させたいのです。  
いろいろと調べ試してみたのですが、p.noteの下にめくりたいページが12個並んで表示されるだけです…

お手数をおかけし申し訳ございませんが、どうぞよろしくお願いいたします。

[code]

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        </style>
        <meta name="description" content=""/>
        <link rel="stylesheet" href="css/style.css">
    
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    
      <script>
      $(function() {
      // 画面初回表示時
      $('p.note').hide();
    
      // image/1.jpgをクリック時の処理
      $('p.button').click(function(){
        // 'p.note'を表示
        $('p.note').show();
        // 'p.button'を非表示
        $(this).hide();
      });
      });
      </script>
    </head>
    
    <body>
    <!--ボタンの画像表示-->
    <p class="button">
      <img style="width: 100%;" src="image/1.jpg" alt="ボタン"  >
    </p>
    
    <!--ノートの画像表示-->
    <p class="note">
      <img style="width: 100%;" src="image/2-1.jpg" alt="ノート" >
    </p>
    
    <!--ノートの切り替え-->
    <div id="flipbook">
     <div><img src="image/note_1.jpg" alt=""></div>
     <div><img src="image/note_2_1.jpg" alt=""></div>
     <div><img src="image/note_2_2.jpg" alt=""></div>
     <div><img src="image/note_2_3.jpg" alt=""></div>
     <div><img src="image/note_2_4.jpg" alt=""></div>
     <div><img src="image/note_2_5.jpg" alt=""></div>
     <div><img src="image/note_2_6.jpg" alt=""></div>
     <div><img src="image/note_2_7.jpg" alt=""></div>
     <div><img src="image/note_3_1.jpg" alt=""></div>
     <div><img src="image/note_3_2.jpg" alt=""></div>
     <div><img src="image/note_4_1.jpg" alt=""></div>
     <div><img src="image/note_5_1.jpg" alt=""></div>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/turn.min.js"></script>
    
    <script type="text/javascript">
    $(function(){
     $('#flipbook').turn({
     width:1000,
     height:600,
     autoCenter: true
     });
    });
    
    </body>
    </html>
    
[/code]


CC BY-SA 4.0
2018-07-16T03:23:02.917
46647
2018-07-16T11:05:35.800
29323
question
html jquery
本のようにページをパラパラめくる事ができるjQueryプラグイン「turn.js」を使いたいです


jQueryプラグインの`turn.js`を使いたいとのことですが、以下のURLには公開されていません。  
そのため、`turn.js`が利用できずエラーが発生していたのだと思います。

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/turn.min.js"></script>
    
[/code]

そのため、実際の公開されている以下のURLから読み込むように修正すると利用できると思います。

[code]

    <script type="text/javascript" src="//cdn.jsdelivr.net/turn.js/3/turn.min.js"></script>
    
[/code]

また、[turn.js](https://github.com/blasten/turn.js#turnjs-3rd-
release)には`3rd`と`4th`があるようですが、`4th`は有料です。(上記のURLは`3rd`になります。)

`3rd`版には、`autoCenter: true`といった機能はないようです。  
そのため、`4th`版の機能が必要な場合は、購入する必要があります。

以下に、改善案のコードを記載します。

[code]

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        </style>
        <meta name="description" content=""/>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/turn.js/3/turn.min.js"></script>
      <script>
    
      </script>
    </head>
    
    <body>
    <!--ボタンの画像表示-->
    <p class="button">
      <img style="width: 100%;" src="http://placehold.it/100x60/333/ffffff&text=image/1.jpg" alt="ボタン"  >
    </p>
    
    <!--ノートの画像表示-->
    <p class="note">
      <img style="width: 100%;" src="http://placehold.it/100x60/333/ffffff&text=image/2-1.jpg" alt="ノート" >
    </p>
    
    <!--ノートの切り替え-->
    <div id="flipbook">
     <div><img src="http://placehold.it/500x300/333/ffffff&text=image/note_1.jpg" alt=""></div>
     <div><img src="http://placehold.it/500x300/333/ffffff&text=image/note_2_1.jpg" alt=""></div>
     <div><img src="http://placehold.it/500x300/333/ffffff&text=image/note_2_2.jpg" alt=""></div>
     <div><img src="http://placehold.it/500x300/333/ffffff&text=image/note_2_3.jpg" alt=""></div>
     <div><img src="http://placehold.it/500x300/333/ffffff&text=image/note_2_4.jpg" alt=""></div>
     <div><img src="http://placehold.it/500x300/333/ffffff&text=image/note_2_5.jpg" alt=""></div>
     <div><img src="http://placehold.it/500x300/333/ffffff&text=image/note_2_6.jpg" alt=""></div>
     <div><img src="http://placehold.it/500x300/333/ffffff&text=image/note_2_7.jpg" alt=""></div>
     <div><img src="http://placehold.it/500x300/333/ffffff&text=image/note_3_1.jpg" alt=""></div>
     <div><img src="http://placehold.it/500x300/333/ffffff&text=image/note_3_2.jpg" alt=""></div>
     <div><img src="http://placehold.it/500x300/333/ffffff&text=image/note_4_1.jpg" alt=""></div>
     <div><img src="http://placehold.it/500x300/333/ffffff&text=image/note_5_1.jpg" alt=""></div>
    </div>
    
    <script>
    $(function(){
      // 画面初回表示時
      $('p.note').hide();
    
      // image/1.jpgをクリック時の処理
      $('p.button').click(function(){
        // 'p.note'を表示
        $('p.note').show();
        // 'p.button'を非表示
        $(this).hide();
      });
    
      // turn.js 3rd
      $('#flipbook').turn({
        width:1000,
        height:600,
      });
    });
    </script>
    
    </body>
    </html>
[/code]


CC BY-SA 4.0
2018-07-16T06:03:21.970
46651
2018-07-16T11:05:35.800
2018-07-16T11:05:35.800
46647
answer