画像を美しく魅せる効果を加えるjQueryプラグイン3選：CSSの書き方も分かるjQueryプラグイン実践活用法（4）（3/3 ページ）
ステップ4：panelGalleryプラグインを組み込む
<head>要素に<script>要素を追加したら、次のようなコードを追加してpanelGalleryプラグインを組み込みます。
<script type="text/javascript">
$(function() {
$('#container').panelGallery({
sections: 5, // 分割するセクション数を指定
imageTransitionDelay: 3000, // 画像を切り替える間隔を指定
sectionTransitionDelay: 700, // セクションを切り替える間隔を指定
startDelay: 2000, // アニメーションを開始するまでの待ち時間を指定
repeat: true // 画像を繰り返して切り替える
});
});
</script>
panelGallery()メソッドのsections、sectionTransitionDelayオプションの値を調整すると、アニメーションをカスタマイズできます。
ここでは、jQueryのセレクタで
これで、先ほどのサンプルが出来上がりました。
切り替える方向を変えるには
デフォルトの設定では、セクションが左から右方向に変わります。デフォルトの方向を変更するには、directionオプションを追加して「rl」「tb」「bt」を設定します。横長の画像は「lr」「rl」、縦長の画像は「tb」「bt」を設定すると、いいでしょう。
$('#container').panelGallery({
direction: 'lr' // left to right（左から右）
direction: 'rl' // right to left（右から左）
direction: 'tb' // top to bottom（上から下）
direction: 'bt' // bottom to top（下から上）
});
cycleプラグインでイロイロな美しい効果を
画像を切り替えるとき、シャッフル、ズーム、カーテン、ブラインドなどのエフェクトを適用する方法を説明します。
まずは、画像がシャッフル（先頭の画像が左側に移動して背後に隠れる）されて、切り替わる例を試してみてください。
ステップ1：画像を用意
Before/AfterやpanelGalleryプラグインと同様に使用する画像をいくつか用意してください。
ステップ2：CSSとライブラリをCDN経由で組み込む
<head>要素に要素と<script>要素を追加してCSSとjQueryのライブラリを組み込みます。
<head> <link href="base.css" rel="stylesheet" type="text/css" />……【1】 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>……【2】 <script src="jquery.cycle.all.min.js" type="text/javascript"></script>……【3】 </head>
- Webページの基本スタイルが宣言されている
- jQuery 1.3.2のライブラリをGoogle CDN経由で取り込む
- cycleプラグインのライブラリを取り込む
cycleプラグインの最新版は、以下のサイトからダウンロードできます。
ステップ3：XHTMLで骨格を定義する
<body>要素に
<div class="slideshow"> <img src="images/1.jpg" alt="" /> <img src="images/2.jpg" alt="" /> <img src="images/3.jpg" alt="" /> …… </div>
ステップ4：cycleプラグインを組み込む
<head>要素に<script>要素を追加したら、次のようなコードを追加してcycleプラグインを組み込みます。
<script type="text/javascript">
$(function() {
$('div.slideshow').cycle({
fx: 'shuffle'
});
});
</script>
ここでは、jQueryのセレクタで
これで、先ほどのサンプルが出来上がりました。
ズーム・ワイプ・ブラインド・カーテン・グロウ効果を付けるには
cycle()メソッドのfxオプションには、「zoom」「wipe」「blindX」「curtainY」「growX」などのエフェクトが設定できます。
$('div.slideshow').cycle({fx: 'zoom'});
$('div.slideshow').cycle({fx: 'wipe'});
$('div.slideshow').cycle({fx: 'blindX'});
$('div.slideshow').cycle({fx: 'curtainX'});
$('div.slideshow').cycle({fx: 'growX'});
アニメーションスピードを調整するには
speedオプションを追加してミリ秒単位で時間を設定します。
$('div.slideshow').cycle({fx: 'shuffle', speed: 3000});
cycleプラグインは、ほかにもカッコイイ効果がいっぱい使える！
fxオプションに指定できる効果の一覧は、「JQuery Cycle Plugin - Effects Browser」を参照してください。カッコイイ効果がたくさんあります。
著者プロフィール
中小企業などの情報化推進の相談を受けるかたわら、Access、SQL Server、OracleなどのデータベースとWebアプリケーションの書籍執筆を手掛ける。
マイクロソフトのVisual Developer - ASP/ASP.NETのMVPとして著者Webサイトで活躍中。
主な著者：「CSS + jQuery Webデザインテクニック」（ビー・エヌ・エヌ新社）
「jQuery+JavaScript実践リファレンス―Webデザインを強化するための」（ソシム）
「ASP.NET 3.5+jQuery Ajax実践サンプル集」（秀和システム）
Copyright © ITmedia, Inc. All Rights Reserved.
注目のテーマ
ITmediaはアイティメディア株式会社の登録商標です。