jQueryを使った、ランダム画像で様々なシャッフル演出効果のあるプラグイン

結構昔からあったんですが、使ってみると意外と素敵なので記事に残しておきます。
イメージギャラリーを作成する時などにも使えそうですし、非常に高度な動きを簡単に実装できますので便利です。
※この記事はJQueryJavaScriptを使ったプラグインの紹介です。
何はともあれサンプルを見てみるのが早いかも
初級者用サンプルデモ
中級者用サンプルデモ1
中級者用サンプルデモ2
上級者編サンプル1
上級者編サンプル2
その他のバライティサンプル
JQueryの基本的構造
基本はjquery.jsと、プラグイン用のjsファイルをまず読み込みます。
※あくまでも基本構造の説明なので、この通りコピペしてもうごきません。
その後、画像を配置する所をdivで囲み、idを振ります。<script type="text/javascript" src="../jquery-1.2.1.js"></script>
<script type="text/javascript" src="../chili-1.7.pack.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js?v2.03"></script>
<script type="text/javascript">
$(function() {
// run the code in the markup!
$('td pre code').each(function() {
eval($(this).text());
});
});
</script>
<div id="s4" class="pics">
<img src="images/beach1.jpg" width="200" height="200" />
<img src="images/beach2.jpg" width="200" height="200" />
<img src="images/beach3.jpg" width="200" height="200" />
</div>
IDを振ったら、最後の</body>の直前あたりに、サンプルで指定されたものを入れます。
たとえば、初級者用サンプルデモであれば、<script type="text/javascript">
ここにいれる。
</script>
や、$('#s1').cycle('fade');
と言ったものです。$('#s2').cycle({
fx: 'scrollDown'
});
CSSもサンプル画面に掲載されているのでわかるかと思います。
.pics {
height: 232px;
width: 232px;
padding: 0;
margin: 0;
}
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
top: 0;
left: 0
}
JQuery Cycle Plugin
ちょっとJqueryを最初から作って試すのは大変だと思ったら、このプラグインをお勧めします。
Downloadは以下のリンク先に。
