アニメーションやエフェクトが非常に豊富で色々な見せ方ができるスライドショー作成用jQueryプラグイン「Skitter」が良さそうなのでご紹介。

キューブ、スライス、フェードなどアニメーションは全部で22タイプ表示可能で、各画像へのリンクをサムネイル表示にしたり数値で指定するなど、オプションも豊富になっています。

以下のような実装で使えるようです。

JavaScript

$(function(){
$('.box_skitter_large').skitter();
});

HTML

<div>
<ul>
<li>
<a href="http://thiagosf.net"><img src="images/01.jpg" /></a>
<div>
<p>Label</p>
</div>
</li>
<li>
<a href="http://cakephp.org"><img src="images/02.jpg" /></a>
<div>
<p>Label</p>
</div>
</li>
<li>
<a href="http://jquery.com"><img src="images/03.jpg" /></a>
<div>
<p>Label</p>
</div>
</li>
</ul>
</div>

これだけエフェクトが多彩だとどれを使えば良いのか迷ってしまいます。
興味のある方は下のリンクからどうぞ。

通常、画像ギャラリーを作る際には全ての画像を同一のサイズにリサイズ調整してから表示させると思いますが、
このプラグインを使うと自動的に最適なサイズになるように調整してくれます。
（サーバーサイドのスクリプトは使用しないので、ファイルサイズはそのままです。）

以下のようなコードで動作するようです。
画像ファイルの配列をプラグインに渡すだけで、簡単にできました。

  //画像ファイルをここで指定します。
  var carousel_images = [
    "1.jpg", 
    "3575375564_79ab90dca8_b.jpg",
    "2505235306_b456603cf3_b.jpg",
    "2925947121_8b1f95c95b_b.jpg",
    "4481220450_91b0aa9e99_b.jpg",
    "299048945_faba1a6a4b_b.jpg",
    "2335224771_cec36d33a6_o.jpg"
  ];


  $(window).load(function() {

    //スライドショーを表示させたい位置を指定します。
    $("#photo_container").isc({
        imgArray: carousel_images
    });

  });

定期的に更新作業がある場合などに便利そうですね。
興味のある方はぜひ！

フルスクリーンに対応しているので、プレゼンの際などに使うと便利かもしれませんね。

公式サイト

HTMLは以下のように作る事でスライドさせるコンテンツにできるようです。

    

        

            /* ここに画像やテーブル構造など、自由にレイアウトします。
            （一つ目のコンテンツ）
             */
        
        

            /* （２つ目のコンテンツ）             */
        
    

JavaScriptは１行追加するだけで動作しました。

$(document).ready( function(){ simpleSlide(); });

動作にはjQuery 1.4が必要なようですね。

動作対応ブラウザは以下のようになっています。

• Firefox 3+
• IE 7 & 8
• Chrome 5+
• Safari 4+
• Opera 9+

IE6では動かないようなので注意が必要ですね。

興味ある方はダウンロードしてみてください。

詳しくは以下

使い方

まずはgithubからプラグインをダウンロードしてきます。

プラグインを有効にします。

$('blinds').floom($$('#blinds img'), {
  axis: 'vertical'
}); 

htmlに以下のように記述します。

<div id="blinds">
  <img title="Description 0" alt="" src="nature-photo0.jpg" />
  <img title="Description 1" alt="" src="nature-photo1.jpg" />
  <img title="Description 2" alt="" src="nature-photo2.jpg" />
  <img title="Description 3" alt="" src="nature-photo3.jpg" />
  <img title="Description 4" alt="" src="nature-photo4.jpg" />
</div>

これで設定は完了です。簡単ですね！

オプションの設定

以下のオプションが設定できるようです。

prefix

CSSで指定するclass名のプレフィックスを指定できます。複数テーマを使用する場合などに

amount

ブラインドの量。初期値は24

animation

アニメーションにかける時間。初期値は70

interval

次のスライドへ遷移するまでの時間。初期値は8000 (ミリ秒)

axis

ブラインドの向き。縦横を切り替えます。「horizontal」か「vertical」を指定。初期値はvertical

progressbar

プログレスバーを表示するかどうか。trueで表示、falseで非表示になります。初期値はtrue

captions

キャプション表示を切り替えます。初期値はtrue

slidesBase

スライドさせる画像のディレクトリを指定できます。

他にも画像変更時のイベントなどを受け取って拡張できるようになっているようです。

オプションはプラグインの呼び出し時に指定します。

			$('blinds').floom($$('#blinds img'), {
				slidesBase: 'slides/',
				sliceFxIn: {
					top: 20
				}
			});

興味のある方はぜひダウンロードしてみてください。