多様な切り替えエフェクトがあるjQueryの画像ギャラリープラグイン「jqFancyTransitions」

jQueryの画像ギャラリープラグインの中でも、ここまで多様な切り替えフエフェクトがあるものはそう多くはないでしょう。
Image gallery with fancy transitions effectsはjQueryを使用して、短冊状に画像を切り替えてくれます。

使用方法

jqfancytransitionsからjqFancyTransitions.jsを、jQueryからjquery.jsをダウンロードします。


<script type="text/javascript" src="jquery-1.4.2.min.js"></script>	
<script type="text/javascript" src="jqFancyTransitions.js"></script>	
<script>
$(function(){
	$('#id名').jqFancyTransitions({ 
		effect: 'wave', //wave, zipper, curtain
		strips: 20, //短冊状に区切るライン数
		position: 'alternate', //開始場所top, bottom, alternate, curtain
		direction:'random', //エフェクト方向left, right, alternate, random, fountain, fountainAlternate
		navigation: true, //ナビをつけるか
		width: 200, //パネルの横幅
		height: 200 //パネルの高さ
	});
});
</script>

あとは画像を以下のように記述すれば完成です。
わりと簡単ですね。


<div id="id名">
	<img src="画像パス" alt="キャプション" />
	<img src="画像パス" alt="キャプション" />
	<img src="画像パス" alt="キャプション" />
	<img src="画像パス" alt="キャプション" />
</div>

サンプル

Javascriptサンプルページ一覧

skuare.net