画像ギャラリーの切り替えにjQueryでインパクトを！「Blockster transition effect 」

画像ギャラリーのJavaScriptの切り替えってありきたりなものが多いですよね。
そんな時、jQueryプラグインのBlockster transition effectを使用するとインパクトのある切り替えが可能になります。

使用方法

Blockster transition effectからファイル一式をダウンロードします。
またjQueryからjquery.jsをダウンロードします。


<script type="text/javascript" src="/test/js/jquery-1.4.2.min.js"></script>	
<script type="text/javascript" src="/test/js/blockster.js"></script>	
<script>
$(function(){
	blockster({
		holder: '#id名',
		rows: 4, //行
		cols: 6, //列
		random: true, //ブロックの表示方法
		animType: fade, //simple,fade
		pause: 3000 //停止時間（ミリ秒）
	});
});
</script>

後は下記のように画像を記載すれば完成です。


<div id="demo">
	<div><img src="画像パス" /></div>
</div>

また、CSSは以下のように調整してください。


#id名 { position: relative;}
	#id名 div { position: absolute;}

サンプル

Javascriptサンプルページ一覧

skuare.net