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

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

[葛西秋雄,@IT]

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

 <body>要素に<div#container>要素を追加したら、ビフォーとアフターの画像を表示する<div>要素を2個入れ子にします。上の<div>要素には<img>要素を追加してBeforeの画像を表示します。下の<div>要素には<img>要素を追加してAfterの画像を表示します。

 ここでは、Beforeに春の風景、Afterには秋の風景の画像を設定します。<img>要素のwidthとheight属性には「500」と「375」を設定して同じサイズにします。

<div id="container">
  &lt;div&gt;<img alt="before" src="images/treeGreen.jpg" width="500" height="375" /></div>
  &lt;div&gt;<img alt="after" src="images/treeRed.jpg" width="500" height="375" /></div>
</div>

 CSSでは、<div#container>要素のmargin-leftとmargin-rightプロパティに「auto」を設定して、画像が画面中央に表示されるようにします。

#container{
  margin-left: auto;   /* 画像を画面中央に表示する */
  margin-right: auto;  /* 画像を画面中央に表示する */
}

ステップ4:Before/Afterプラグインを組み込む

 <head>要素に<script>要素を追加したら、次のようなコードを追加してBefore/Afterプラグインを組み込みます。ここでは、jQueryのセレクタで<div#container>要素を検索してbeforeAfter()メソッドを実行しています。

<script type="text/javascript">
  $(function() {
    $('#container').beforeAfter();
  });
</script>

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

画像が表示されたときに右側から徐々に切り替え、アニメーションスピードを調整するには

 Webブラウザに画像が表示されたときに、右側から徐々に画像を切り替えるには、beforeAfter()メソッドにanimateIntroオプションを追加して「true」を設定します。

 アニメーションスピードを調整するには、introDelayとintroDurationオプションを追加してミリ秒単位で時間を設定します。

$('#container').beforeAfter({
  animateIntro: true,  // 右側から徐々に画像を切り替える
  introDelay: 3000,    // アニメーション開始までの待ち時間を指定
  introDuration: 3000  // アニメーションスピードを指定
});

panelGalleryプラグインで画像を部分ごとに切り替え

 画像をセクション単位に分割して、セクション単位で画像を切り替える方法を説明します。

ALT 図3 左から右へ画像がセクション単位に切り替わる途中(画像をクリックすると、実際にサンプルが試せます)

 Webブラウザを起動してサンプルを表示すると、画像がセクション単位で段階的に切り替わります。

ステップ1:画像を用意

 panelGalleryプラグインで使用する画像を3つ用意します。画像をセクション単位で分割して切り替えるため、ここでは横長の画像を用意します。

ALT 図4 サンプルの「images」フォルダに格納されている画像素材

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

 <head>要素に<link>要素と<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.4.2/jquery.min.js" type="text/javascript"></script>……【2】
  <script src="jquery.panelgallery-1_1.js" type="text/javascript"></script>……【3】
</head>
  1. Webページの基本スタイルが宣言されている
  2. jQuery 1.4.2のライブラリをGoogle CDN経由で取り込む
  3. panelGalleryプラグインのライブラリを取り込む

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

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

 <body>要素に要素を追加したら、<img>要素を追加してpanelGalleryプラグインで表示する画像を定義します。ここでは、3つの画像を追加して切り替えます。<img>要素には必ずwidthとheight属性を追加して幅と高さを設定します。

<div id="container" class="headerphoto">
  <img src="images/1.jpg" width="760" height="200" alt="" />
  <img src="images/2.jpg" width="760" height="200" alt="" />
  <img src="images/3.jpg" width="760" height="200" alt="" />
</div>

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

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

メールマガジン登録

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