jQueryを使ったプレゼンテーションツールjQuery-Presentationの使い方

MOONGIFTさんのエントリで紹介されていたjQueryで作られたプレゼンテーションツールjQuery-Presentationを実際に使ってみました。

MOONGIFT: » jQuery製のプレゼンテーション「jQuery Presentation」:オープンソースを毎日紹介

jquery-presentationのダウンロード

1.以下のサイトにアクセスします。

- davist11's jQuery-Presentation at master - GitHub

2.右上にあるDownload Sourceから必要なファイルを一式ダウンロードします。

3.ダウンロードする形式を選択します。(zipかtarが選択できます。)

jquery-presentationの使い方

ダウンロードしたファイルを解凍して、index.htmをブラウザで見るとすぐに動きます。スライドを作成するには、index.htmを編集します。以下のようにdivタグで区切られたところに表示させたい文章を記述します。

<div class="slide">
  スライド１の内容
</div>
<div class="slide">
  スライド２の内容
</div>

続いて、jquery-presentationをカスタマイズする方法をご紹介します。

ページ切り替え時のエフェクトを変更する

ページ切り替え時のエフェクトを変更する場合には、jquery.presentation.jsを変更する必要があります。ただ、jquery.presentation.jsはサイズを圧縮するためか、ワンライナーで書かれているため、編集しづらいです。このため、jquery.presentation-full.jsを編集して、そちらをincludeしてやるようにします。
index.htmの55行目を以下のように修正します。

エフェクトを変更するには、jquery.presentation-full.jsのExample usageを参考にtransitionの項目を変更します。transitionの項目には、以下の値を指定することができます。

fade(デフォルトのエフェクト。フェードアウトする)
show/hide(アニメーションなしにスライドの切り替えを行う)
slide(スライドが上方向に移動します)

var config = {
  slide: '.slide',
  pagerClass: 'nav-pager',
  prevNextClass: 'nav-prev-next',
  prevText: '前へ',
  nextText: '次へ',
  transition: "slide"
};