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

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

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

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

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

<div id="container">
  <div><img alt="before" src="images/treeGreen.jpg" width="500" height="375" /></div>
  <div><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プラグインで画像を部分ごとに切り替え

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

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

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

ステップ1：画像を用意

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

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

ステップ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.4.2/jquery.min.js" type="text/javascript"></script>……【2】
  <script src="jquery.panelgallery-1_1.js" type="text/javascript"></script>……【3】
</head>

Webページの基本スタイルが宣言されている
jQuery 1.4.2のライブラリをGoogle CDN経由で取り込む
panelGalleryプラグインのライブラリを取り込む

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

http://www.catchmyfame.com/2009/05/02/jquery-panel-gallery-plugin/

Catch My Fame ≫ jQuery Panel Gallery Plugin via kwout

ステップ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>

ステップ4：panelGalleryプラグインを組み込む

前のページへ 1|2|3 次のページへ