エフェクト満載の画像ギャラリー系javascript「jQuery Cycle Plugin」

画像ギャラリーといえば「LightBox」ですが、周りで使用している人が多く、食傷気味の人も多いと思います。
jQuery Cycle Pluginでは、過剰ともいえるほどのエフェクトが使用できます。
自分だけのオリジナルを簡単に作成したい方にお勧めの画像ギャラリー系Javascriptです。

使用方法

jQuery Cycle Pluginからjquery.cycle.all.pack.jsをjQueryからjquery.jsをダウンロードします。
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.cycle.all.pack.js" type="text/javascript"></script>
画像を囲んだdivなどの要素に付与したidやclass名を以下のscriptに書き込みます。
<script type="text/javascript">
$(function() {
$('id名 or class名').cycle
});
</script>
基本はこれだけです。
あとはさまざまなオプションを付けることができます。
オプション（数値などはデフォルト）
Javascriptサンプルページ一覧
skuare.net

サンプル

Slide Up

$('#up').cycle({
fx: 'scrollUp',
delay: -2000
});

Shuffle

$('#shuffle').cycle({
fx: 'shuffle',
delay: -2000
});

Zoom

$('#zoom').cycle({
fx: 'zoom',
delay: -2000
});

Slide Right（クリックで次）

$('#right').cycle({
fx: 'scrollRight',
click: '#right',
timeout: 0
});

Custom1

$('#custom1').cycle({
fx: 'custom',
cssBefore: {
left: 115,
top: 115,
width: 0,
height: 0,
opacity: 1,
zIndex: 1
},
animOut: {
opacity: 0
},
animIn: {
left: 0,
top: 0,
width: 200,
height: 200
},
cssAfter: {
zIndex: 0
},
delay: -3000
});

Custom2（マウスオーバーでストップ、クリックで次）

$('#custom2').cycle({
fx: 'fade',
speed: 300,
timeout: 3000,
next: '#custom2',
pause: 1
});