[JQuery]簡単に設置できるトランジジョン付のスライドショー

写真が数枚あって、それを表示させる際にスライドショーっぽく見せたい。
そんな時にもお世話になるJQuery。
ただ単にフェードイン・アウトするだけのもあるけど、もう少し動きのあるのがいい場合
今回紹介するjqFancyTransitionsなんかは設置も簡単でお手軽。

このスクリプトはデフォルトでいくつかのトランジジョンパターンがあって、パラメータ設定で選ぶだけのお手軽さがとっても良い感じなのです。

サンプルは左サムネイルから飛べる配布先ページにて全部見ることが可能です。
なかなかオッサレな感じのエフェクトが8種類揃っています。
IE6対応なのも嬉しいポイントですね。

さて、実際の設置方法ですがまず必要なのはJQueryの本体。
これをいつもの様に読み込ませてからjqFancyTransitions.1.8.min.jsを読み込ませます。

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jqFancyTransitions.1.8.min.js" type="text/javascript"></script>

スライドショーの部分のHTMLはこんな感じで組みます。

<div id='slideshowHolder'>
 <img src='img001.jpg' alt='img001でっす' />
 <img src='img002.jpg' alt='img002でっす' />
 <img src='img003.jpg' alt='img003でっす' />
</div>

そしてスライドショーの部分を動かす為にhead内にこのスクリプトを書いてあげましょう。

<script>
$(document).ready( function(){
	$('#slideshowHolder').jqFancyTransitions({ width: 400, height: 300 });
});
</script>

slideshowHolderの部分はdivタグのidと同じになってます。
HTML側で付けたものと同じにしないと動いてくれません。

あとはパラメータ部分でいろんな物を足すことができます。
下記はパラメータ一覧です。

effect: '', // wave, zipper, curtain
width: 500, // width of panel
height: 332, // height of panel
strips: 20, // number of strips
delay: 5000, // delay between images in ms
stripDelay: 50, // delay beetwen strips in ms
titleOpacity: 0.7, // opacity of title
titleSpeed: 1000, // speed of title appereance in ms
position: 'alternate', // top, bottom, alternate, curtain
direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
navigation: false, // prev and next navigation buttons
links: false // show images as links

たとえば、600×400ピクセルのギャラリーで
エフェクトタイプをカーテンにしてスライドショーが始まる前に待機時間を作る場合は

<script>
$(document).ready( function(){
	$('#slideshowHolder').jqFancyTransitions({ effect: 'curtain',width: 600, height: 400,delay: 3000 });
});
</script>

という感じで設定してあげればOK。

それにしても簡単にこういうのができるのはありがたいですねえ。
さすがに非力なマシンでこいつが施されたページを見るのはきっついかも知れません。