シンプルなスライドショーjQueryプラグイン「jquery.SimpleSlideShow.js」

複数枚の画像をフェードイン、フェードアウトしながら繰り返し再生するjQueryプラグイン「jquery.SimpleSlideShow.js」をバージョンアップしました（Ver0.3 => Ver0.4）。

前バージョンからの変更点

• （Ver0.5）キャプション表示が可能。
• （Ver0.5）ナビゲーションの種類に画像を追加。
• （Ver0.5）intervalが0のときはナビゲーションクリックでのみ切り替え可能に変更。
• （Ver0.5）クリック時の切り替えをフェード表示に変更。
• （Ver0.4）SimpleSlideShow関数の引数 width、height を廃止。
• （Ver0.4）ナビゲーションを表示する引数 showNav を追加。

ダウンロード

デモ

デモ1

imgのdata-caption属性に指定した値をidを持つ要素をキャプションとして表示できます。

デモ2

使い方

下記のような感じでjQueryとjquery.SimpleSlideShow.jsとCSSを読み込みます。

<script type="text/javascript" src="/js/jquery.simpleSlideShow/jquery.simpleSlideShow.js"></script>
<link rel="stylesheet" type="text/css" href="/js/jquery.simpleSlideShow/jquery.simpleSlideShow.css" />

そして、下記で実行。

JavaScript

$( function() {
  $( '#testGallery' ).SimpleSlideShow( {
     duration: 1000, // アニメーションにかかる時間
     interval: 3000,  // 次のアニメーションまでのインターバル
     showNav : false,  // ナビゲーションを表示するかどうか
     navStyle: 'string', // ナビゲーション種別。string=数字、image=画像
     showCaption: false  // キャプションを表示するかどうか
  } );
} );

HTML

<div id="testGallery" class="simpleSlideShow">
  <a href="http://google.com"><img src="/images/img1.jpg" alt="" /></a>
  <img src="/images/img2.jpg" alt="" />
  <img src="/images/img3.jpg" alt="" />
<!-- end #testGallery--></div>

画像群は自動的にdiv.simpleSlideShowWrapperで囲まれます。プラグインのCSSの指定でdiv.simpleSlideShowWrapperは中央揃えされます。また、サイズは1枚目の画像のサイズ（引数で設定した場合はそのサイズ）に設定されます。

ナビゲーション表示

引数showNavがtrueのときは、下記のコードがSimpleSlideShow関数を設定した要素内の最後尾に追加されます。

<div class="simpleSlideShowNav">
  <ul>
    <li class="nav_1 cur">1</li>
    <li class="nav_2">2</li>
    <li class="nav_3">3</li>
    ...
  </ul>
</div>

各liは、「画像の順番」を囲む形となり、画像の順番に応じたクラスが設定されます。また、現在表示されている画像に対応して「cur」クラスが設定されます。プラグインのCSSでは何もスタイルが設定されていないので、適当なスタイルを設定してください。

キャプション表示

引数shoCaptionがtrueのときは、下記のコードがSimpleSlideShow関数を設定した要素内の最後尾に追加されます。キャプションは画像のtitle属性、もしくはdata-caption属性で指定された文字列をidとして持つ要素の中身が利用されます。その要素にsimpleSlideShowCaptionというclassを付けておくことで、ページ表示時に要素を非表示にすることができます。

<img src="..." title="キャプション1" />
<img src="..." data-caption="caption2" />
<div id="caption2" class="simpleSlideShowCaption">
キャプション2
</div>
<div class="simpleSlideShowCaptioinWrapper">
ここにキャプションが表示されます。
</div>

ダウンロード