スマートフォンで見た時にもページがめくれるようにしたい。

Question

前提・実現したいこと

本をめくるように表示されるプラグインを使ったところ、パソコン版では表示されましたが、スマホ版では右が切れてしまい、ページをめくることができませんでした。

発生している問題・エラーメッセージ

スマホで見た時の画面↓

右端が切れてページがめくれないのと、1ページ目と2ページ目の間に隙間があく。

パソコンで見た時の画面↓

2ページ目もきちんと表示されるためページをめくることができて、1ページ目と2ページ目の間に隙間はあかない。

<script type="text/javascript" src="../turnjs4/extras/jquery.min.1.7.js"></script>
<script type="text/javascript" src="../turnjs4/lib/turn.min.js"></script>
<script type="text/javascript">
$(function(){
$('#flipbook').turn({
width:480,
height:318,
autoCenter: true
});
});
</script>

<div id="flipbook" class="alignright frame">
<div><img src="../images/1.jpg" width="240" alt=""></div>
<div><img src="../images/2.jpg" width="240" alt=""></div>
<div><img src="../images/3.jpg" width="240" alt=""></div>
<div><img src="../images/4.jpg" width="240" alt=""></div>
<div><img src="../images/5.jpg" width="240" alt=""></div>
</div>

↓は使っているテンプレートのスマホの画面用の設定です。

@media only screen and (max-width: 480px){
	#header .logo{padding-top:10px;}
  .info{padding:10px 0 0;}
	ul#topnav li{width:50%;}

	ul#topnav li:nth-child(3n){
	border-right:1px solid #6c272d;
	width:50%;
	}	
	ul#topnav li:nth-child(2n),ul#topnav li:nth-child(6n){border-right:0;}
	
	#mainBanner h2,#mainBanner h3{font-size:80%;}
}

試したこと

画像の大きさを小さくすることは試してみましたが、元々は文章が入っているので、あまり小さくし過ぎると読めないと思いまして、横幅240px以下は試していないです。

Answer 1

turn.js の API を見てみました。

jQueryプラグインの記述ルール:
{1.対象要素のjQueryObject}.{2.pluginName}({3.pluginArguments})

1. $('#flipbook')
2. turn
3. 第一引数に object のみの場合は初期化。

プラグインのAPIを呼ぶには、第一引数にAPI名、以降、APIが関数の時は引数を与える。

と、古式床しい jQuery用プラグイン実装でした。

---

ご質問のコードでも $('#flipbook').turn({options}) と初期化していますので、条件によってサイズを変更する方法も試してみてはどうでしょうか。

1. $('#flipbook').turn("size", width, height) で変更したいサイズを設定
2. $('#flipbook').turn("resize") 全ページを再設定

という手順を思いつきます（ソースコードは未確認です）。

ドキュメントを読んでの思いつきで申し訳ありません。
共にリンクを示しましたので、解決の糸口になればと思います。

1. 使えそうなAPIを試してみる
2. 実装を調べてみる

※初期値を与える際、表示するデバイスに応じて {options} を動的生成するのも良いかもしれません。

Comments

[wally]

AkitoshiManabe様

1/2はアドバイスをありがとうございました。
その後、私が体調を崩して寝込んでしまったので、全然返信できずすみません。
条件によってサイズを変更を試してみたところできました。

本当にありがとうございましたm(__)m