連載
» 2010年03月17日 00時00分 公開

画像を美しく魅せる効果を加えるjQueryプラグイン3選CSSの書き方も分かるjQueryプラグイン実践活用法(4)(3/3 ページ)

[葛西秋雄,@IT]
前のページへ 1|2|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のセレクタで要素を検索してpanelGallery()メソッドを実行しています。このメソッドのsectionsオプションに「5」を設定して画像を5個のセクションに分割して切り替えます。セクションを切り替える間隔はsectionTransitionDelayにミリ秒単位で設定します。ここでは0.7秒間隔でセクションを切り替えます。

 これで、先ほどのサンプルが出来上がりました。

切り替える方向を変えるには

 デフォルトの設定では、セクションが左から右方向に変わります。デフォルトの方向を変更するには、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プラグインでイロイロな美しい効果を

 画像を切り替えるとき、シャッフル、ズーム、カーテン、ブラインドなどのエフェクトを適用する方法を説明します。

 まずは、画像がシャッフル(先頭の画像が左側に移動して背後に隠れる)されて、切り替わる例を試してみてください。

ALT 図5 先頭の画像がシャッフルされて2番目の画像の背後に隠れた状態(画像をクリックすると、実際にサンプルが試せます)

ステップ1:画像を用意

  Before/AfterやpanelGalleryプラグインと同様に使用する画像をいくつか用意してください。

ステップ2:CSSとライブラリをCDN経由で組み込む

 <head>要素に要素と<script>要素を追加してCSSとjQueryのライブラリを組み込みます。

&lt;head&gt;
  <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>
  1. Webページの基本スタイルが宣言されている
  2. jQuery 1.3.2のライブラリをGoogle CDN経由で取り込む
  3. cycleプラグインのライブラリを取り込む

 cycleプラグインの最新版は、以下のサイトからダウンロードできます。

ステップ3:XHTMLで骨格を定義する

 <body>要素に要素を追加したら<img>要素を5個入れ子にします。<img>要素のsrc属性には「images」フォルダに格納されている画像のパスを設定します。サンプルの「images」フォルダには、1.jpgから5.jpgの画像が格納されています。

<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()メソッドを実行します。cycle()メソッドの引数には、fxオプションを追加して各種エフェクトを設定します。ここでは「shuffle」のエフェクトを設定しています。

 これで、先ほどのサンプルが出来上がりました。

ズーム・ワイプ・ブラインド・カーテン・グロウ効果を付けるには

 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実践サンプル集」(秀和システム)



前のページへ 1|2|3       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。