0

以下プログラム内の、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>

1 件の回答 1

1

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版の機能が必要な場合は、購入する必要があります。

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

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

7
  • tanalab2様>返信遅くなり申し訳ございません。そうです!このようにページがめくれるようにしたかったのです。私のプログラムではページが変わらないので画像に問題があると思い見直しているところです。できれば、ページがめくれる画像を最大に表示してある画像の上に重ねて表示したいのです。
    – user29323
    2018年7月16日 8:38
  • かさねがさね申し訳ございませんがどうぞ宜しくお願いいたします。
    – user29323
    2018年7月16日 8:44
  • tanalab2様>いただいたスニペットをパソコンにコピーして実行したのですが、ページをめくる動作ができず画像が縦に並んで表示されてしまいます。こちらのサイトで「スニペットを実行」するとページをめくることができます。私のパソコンの設定がおかしいのでしょうか…どうぞ宜しくお願いいたします。
    – user29323
    2018年7月16日 9:45
  • @user29323 さん ローカルで実行している可能性もあるのでスクリプトのURLを修正しました。ご確認ください。ただ、turn.jsの3版はchromeで動かないようです。chromeでの動作が必要であれば別の方法を検討する必要があるかもしれません。(github.com/blasten/turn.js/issues/399)
    – user28902
    2018年7月16日 11:07
  • tanalab2様>真にありがとうございます!早速試してみます。
    – user29323
    2018年7月16日 11:09

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。