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

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

使用方法
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>

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

sponsors

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

記事作成:
記事URL:

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