CSSの書き方も分かるjQueryプラグイン実践活用法
連載インデックスへ
CSSの書き方も分かるjQueryプラグイン実践活用法（2）

画像を美しく魅せる効果を加えるjQueryプラグイン3選

葛西 秋雄
2010/1/7

□ ステップ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オプションの値を調整すると、アニメーションをカスタマイズできます。

- PR -

　ここでは、jQueryのセレクタで<div#container>要素を検索して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プラグインでイロイロな美しい効果を

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

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

図2　Firefoxのアドオン「Firebug」でコンソールにメッセージが出力されたことを確認
図5　先頭の画像がシャッフルされて2番目の画像の背後に隠れた状態（画像をクリックすると、実際にサンプルが試せます）

□ ステップ1：画像を用意

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

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

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

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

http://www.malsup.com/jquery/cycle/

JQuery Cycle Plugin via kwout

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

　<body>要素に<div#slideshow>要素を追加したら<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のセレクタで<div#slideshow>要素を検索して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」を参照してください。カッコイイ効果がたくさんあります。

■ ＠IT関連記事

jQueryで学ぶ簡単で効果的なAjaxの使い方
いま話題の「jQuery」を使って、目的を持ったAjax開発の効率化や使いどころ・注意点などについてサンプルを見ながら解説していきます。Webデザイナ／プロデューサーも必見！
jQuery逆引きリファレンス
やりたいことからコードが見つかるjQuery辞典。まずはセレクタ構文に関する「ＸＸするには？」を24本一挙公開。jQueryは.NETでも公式サポート
「Insider.NET」フォーラム
ようこそJavaScriptの世界へ
初心者のためのJavaScript入門（1）　JavaScriptで本格的なプログラミングの世界へ。実用的なアプリケーションを作れるようになるまで
「Coding Edge」フォーラム 2009/11/18
DOMの基本を学ぼう
DOMを介してHTMLを操作する方法を理解しよう。そのためには、正しいHTMLの概念とドキュメントツリーを知る必要がある
いまさら聞けないCSS／スタイルシート入門
Webデザインにあると便利なCSS。ちょっとサイトをステキにするためのスタイルシートです。基本の基本を学びませんか？
「デザインハック」コーナー

  著者プロフィール
葛西 秋雄

中小企業などの情報化推進の相談を受けるかたわら、Access、SQL Server、OracleなどのデータベースとWebアプリケーションの書籍執筆を手掛ける。
マイクロソフトのVisual Developer - ASP/ASP.NETのMVPとして著者Webサイトで活躍中。
主な著者：「CSS + jQuery Webデザインテクニック」（ビー・エヌ・エヌ新社）
「jQuery+JavaScript実践リファレンス―Webデザインを強化するための」（ソシム）
「ASP.NET 3.5+jQuery Ajax実践サンプル集」（秀和システム）

3/3  

　INDEX
CSSの書き方も分かるjQueryプラグイン実践活用法（4）　
画像を美しく魅せる効果を加えるjQueryプラグイン3選
  Page1
2つ重ねて比較・部分切り替え・ズーム/カーテンなど
Before/Afterプラグインで2つの画像を重ねて比較
  Page2
panelGalleryプラグインで画像を部分ごとに切り替え
Page3
cycleプラグインでズーム/カーテンなどイロイロな美しい効果を

CSSの書き方も分かるjQueryプラグイン実践活用法 バックナンバー 連載インデックスへ»


「デザインハック」コーナーへ


TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH