本のようにページをパラパラめくる事ができるjQueryプラグイン「turn.js」を使いたいです

投稿者: Anonymous

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

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

<!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>

解決

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

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

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

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

また、turn.jsには3rd4thがあるようですが、4thは有料です。(上記のURLは3rdになります。)

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

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

_x000D_

_x000D_

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

_x000D_

_x000D_

_x000D_

回答者: user28902

Leave a Reply

Your email address will not be published. Required fields are marked *