[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]

sponsors

top of page

©2018 coliss