ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

jQueryプラグイン, ページめくり

画像を本をめくるようにみれるJQueryプラグイン「FlipPage」

画像を本をめくるようにみれるJQueryプラグイン「FlipPage」

画像を本をめくるように見せる方法は、Flashを使ったり、複雑なJavaScriptでプログラムを組んだりと面倒でしたが、簡単にJQueryで表現できるようになりました。

FlipPage: Tournez les pages sur votre iPad !

ということで、こんなかんじになります。

→ 画像を本をめくるようにみれるJQueryプラグイン「FlipPage」サンプルページ

iPhone 3G / iPhone 3GS / iPad 1 / iPad 2 – Android – Firefox 6 – Firefox 7 Beta – Safari – IE9に対応しているようです。iPhoneなどでもタップでページをめくることができます。

画像を本をめくるようにみれるJQueryプラグイン「FlipPage」の使い方は続きをご覧下さい。


まずは、「FlipPage: Tournez les pages sur votre iPad !」の記事のなかにある「Téléchargements: v0.5.0」からファイルを一式ダウンロード。

まず<head>~</head>のなかで、用意した画像のサイズに値を合わせます。

(function($){
$(document).ready(function(){
$(‘.exemples:eq(0)’).flippage({
width: 500,    /// 画像の幅
height: 333    /// 画像の高さ
});

あとは、<body>~</body>内の画像を出したいところで
<div>
<div><img src=”画像Aパス1″ style=”margin-left: 0px;” /></div>
<div><img src=”画像Aパス1″ style=”margin-left: -225px;” /></div>
<!– 画像幅の半分をマージンさせます。 –>
<div><img src=”画像Bパス2″ style=”margin-left: 0px;” /></div>
<div><img src=”画像Bパス2″ style=”margin-left: -225px;” /></div>
<!– 以下画像分繰り返し –>
</div>
で設定します。

以下はサンプルのソース。ご参考まで。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=shift_jis” />
<title>画像を本をめくるようにみせる。「FlipPage: Tournez les pages sur votre iPad !」</title>
<meta name=”apple-mobile-web-app-capable” content=”yes”>
<meta name=”apple-touch-fullscreen” content=”yes”>

<!– jQuery –>
<script src=”js/jquery.min.js”></script>

<!–  Flippage –>
<script src=”js/jquery.flippage.js”></script>
<link href=”css/jquery.flippage.css” type=”text/css” rel=”stylesheet” />

<style>
body > div {
display: block;
width: 500px;
height: 333px;
margin-left: 50px;
margin-top: 50px;
}

.exemples > div {
background-color: white;
}
</style>
<script>
(function($){
$(document).ready(function(){
$(‘.exemples:eq(0)’).flippage({
width: 500,
height: 333
});

$(‘.exemples:eq(1)’).flippage({
width: 300,
height: 150
});
});
})(jQuery);
</script>
</head>

<body>
<body>
<h1>本をめくるように画像を見せるjQueryプラグイン</h1>
<div>
<h2>Exemple 1</h2>
<div>
<div><img src=”img/img1.jpg” style=”margin-left: 0px;” /></div>
<div><img src=”img/img1.jpg” style=”margin-left: -250px;” /></div>
<div><img src=”img/img2.jpg” style=”margin-left: 0px;” /></div>
<div><img src=”img/img2.jpg” style=”margin-left: -250px;” /></div>
<div><img src=”img/img3.jpg” style=”margin-left: 0px;” /></div>
<div><img src=”img/img3.jpg” style=”margin-left: -250px;” /></div>
<div><img src=”img/img4.jpg” style=”margin-left: 0px;” /></div>
<div><img src=”img/img4.jpg” style=”margin-left: -250px;” /></div>
<div><img src=”img/img5.jpg” style=”margin-left: 0px;” /></div>
<div><img src=”img/img5.jpg” style=”margin-left: -250px;” /></div>

</div>
</div>
<div>
<h2>Exemple 2</h2>

<div>
<div><h3>Page 1</h3></div>
<div><h3>Page 2</h3></div>
<div><h3>Page 3</h3></div>
<div><h3>Page 4</h3></div>
<div><h3>Page 5</h3></div>
<div><h3>Page 6</h3></div>
<div><h3>Page 7</h3></div>
<div><h3>Page 8</h3></div>
</div>
</div>
</body>
</html>

この記事と関連してると思われる記事:


2 コメント

  1. tatsuo

    英文だと当然左開きな訳ですが、和文の縦書き右開きに対応できないものでしょうか。

    • pannyatto

      tatsuo様

      コメントありがとうございます。右開きにできないものかと調べてみたのですが、さくっと右開きにできる仕様にはなっていないようでした。お力になれず申し訳ありません。

      ちなみに、別のjQueryプラグイン「turn.js」ですと、オプションに
      direction: “rtl”
      を設定してあげることで右左開きを変更できるようです。ご参考まで。

      http://pannyatto.firebird.jp/archives/525

      $(“#magazine”).turn({direction: “rtl”});

      * rtl はleft to rightのこと。
      * デフォルト値はltr。

Leave a Reply

Theme by Anders Norén