jquery.SimpleSlideShow.js の使い方

jQuery.SimpleSlideShow.js はシンプルなスライドショーを簡単に実現できるjQueryプラグインです。

デモ

デモ1

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

デモ2

読み込み、設定

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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<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() {
  $( '.simpleSlideShow' ).SimpleSlideShow( {
    type       : 'fade',   // 切り替えアニメーション( fade, slide )
    duration   : 1000,     // アニメーション時間（ms）
    interval   : 3000,     // 次のアニメーションまでのインターバル（ms）
    showNav    : false,    // ナビゲーションの表示
    navStyle   : 'string', // ナビゲーション種別( string, image )
    showCaption: false     // キャプションの表示
  } );
} );

HTML

<div 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 .simpleSlideShow --></div>

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

アニメーションの種類

画像切り替え時のアニメーションは、引数 type が fade のときはフェードイン・フェードアウトを、slide のときは左からのスライドとなります。

ナビゲーション表示

引数 showNav が true のときは、SimpleSlideShow 関数を設定した要素の後に下記のコードでナビゲーションが追加されます。

<div id="hoge" class="simpleSlideShowWrapper">
  ここにスライドショー画像
</div>
<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」クラスが設定されます。navStyle が string の場合は上記のように数字が入ります。navStyle が image の場合はスライドショー中の画像が入ります（自動でサムネイル表示がされるわけではないので、CSS で縮小してください）。何もスタイルが設定されていないので、適当なスタイルを設定してください。

キャプション表示

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

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

ライセンス

GPL2

ダウンロード