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

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

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

sponsors

「画像ギャラリーの切り替えにjQueryでインパクトを!「Blockster transition effect 」」をシェアする

記事作成:
記事URL:

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