ホームページを作る人のネタ帳

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

JQueryサンプル

結構昔からあったんですが、使ってみると意外と素敵なので記事に残しておきます。
イメージギャラリーを作成する時などにも使えそうですし、非常に高度な動きを簡単に実装できますので便利です。

※この記事はJQueryJavaScriptを使ったプラグインの紹介です。

何はともあれサンプルを見てみるのが早いかも


初級者用サンプルデモ

中級者用サンプルデモ1

中級者用サンプルデモ2

上級者編サンプル1

上級者編サンプル2

その他のバライティサンプル

JQueryの基本的構造


基本はjquery.jsと、プラグイン用のjsファイルをまず読み込みます。
※あくまでも基本構造の説明なので、この通りコピペしてもうごきません。

<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を振ります。

<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は以下のリンク先に。
DOWNLOAD

@yamada_nt
Posted by@yamada_nt
スポンサードリンク

Comments 0

There are no comments yet.

Leave a reply