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

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

葛西 秋雄
2010/3/17
- PR -

□ ステップ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プラグインで画像を部分ごとに切り替え

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

図2　Firefoxのアドオン「Firebug」でコンソールにメッセージが出力されたことを確認
図3　左から右へ画像がセクション単位に切り替わる途中（画像をクリックすると、実際にサンプルが試せます）

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

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

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

図4　サンプルの「images」フォルダに格納されている画像素材
図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>
  1. Webページの基本スタイルが宣言されている
  2. jQuery 1.4.2のライブラリをGoogle CDN経由で取り込む
  3. 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>要素に<div#container>要素を追加したら、<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>
2/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