画像を美しく魅せる効果を加えるjQueryプラグイン3選：CSSの書き方も分かるjQueryプラグイン実践活用法（4）（3/3 ページ）
jQueryと、そのプラグインの使い方を、UI効果（エフェクト）のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。
ステップ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プラグインの最新版は、以下のサイトからダウンロードできます。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
ステップ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.