画像を美しく魅せる効果を加えるjQueryプラグイン3選：CSSの書き方も分かるjQueryプラグイン実践活用法（4）（2/3 ページ）
jQueryと、そのプラグインの使い方を、UI効果（エフェクト）のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。
ステップ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プラグインで画像を部分ごとに切り替え
画像をセクション単位に分割して、セクション単位で画像を切り替える方法を説明します。
Webブラウザを起動してサンプルを表示すると、画像がセクション単位で段階的に切り替わります。
ステップ1：画像を用意
panelGalleryプラグインで使用する画像を3つ用意します。画像をセクション単位で分割して切り替えるため、ここでは横長の画像を用意します。
ステップ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プラグインの最新版は、以下のサイトからダウンロードできます。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
ステップ3：XHTMLで骨格を定義する
<body>要素に
<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.