[JS]雑誌をめくるようにぺらっと画像を表示するスクリプト -mLivre

雑誌をめくる「Pege Flip」のエフェクトで画像を次々に表示するjQueryのプラグインを紹介します。

mLivre
デモ

[ad#ad-2]

mLivreの実装

外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして指定します。

<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.mLivre.min.js"></script>

HTML

img要素をdiv要素で内包します。

<div id="demo1">
  <img src="celestin/couverture.jpg" width="650" height="325" />
  <img src="celestin/illustration2.jpg" width="650" height="325" />
  <img src="celestin/illustration7.jpg" width="650" height="325" />
  <img src="celestin/illustration10.jpg" width="650" height="325" />
  <img src="celestin/illustration13.jpg" width="650" height="325" />
  <img src="celestin/4couverture.jpg" width="650" height="325" />
</div>

JavaScript

jQueryのセレクタで内包している要素（#demo1）とサイズを指定します。

  $('#demo1').mLivre({
    width:650,
    height:325
  });

スクリプトのオプション

スクリプトのオプションでは、サイズやデフォルトのページなどが設定できます。

• width

  幅、default:300。

• height

  高さ、default:150。

• dossier

  分からないので、機械訳「2つの絵がプラグインによって使用したファイルを含むこと」、default:mLivre/

• pageDefault

  最初に表示するページ、default:0

• over

  ホバーですこしだけめくれるエフェクトの適用、default:true

callback関数

「eventLoad」「eventOpen」の二つが用意されています。

  $('#demoLivreEvent1').mLivre({
    width:650,
    height:325,
    eventLoad:function() {
      $('#demoLivreEvent1Sortie').html('Livre chargé : '+String(this));
    }
  });

[ad#ad-2]