ウィザード・コード

jQuery AdImageZoomerの概要

jQuery AdImageZoomerはウェブページに広告画像を表示させるときに、自動でその画像の拡大アニメーションを行うスクリプトです。

ひとつの画像に複数のフォーカスしたい箇所があるとき、たとえば商品がいくつも載っている画像の場合、画像に写っている商品をそれぞれ順番にクローズアップさせます。

また、画像の拡大アニメーションと同時に商品説明のためのキャプションが表示されます。

AdImageZoomer デモページ

⇒家電製品の拡大アニメーション

ウェブページへの設置方法

スクリプトを外部ファイルとして読み込む

AdImageZoomer.jsはjQueryのプラグインとして動作します。デモで使用されているjQueryのバージョンは10.2です。これよりも下位のバージョンについては、Firefoxで1.4以上で動作することを確認しています。

まず、HTMLに以下のように外部読み込みするJavaScriptファイルを記述します。jQueryはGoogleなどのホスティングサービスを利用するのがいいでしょう。AdImageZoomer.jsはサイトのサーバー上にアップロードします。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.ad-image-zoomer.v0.2.js"></script>

CSSファイルの設置

次にjQuery AdImageZoomer用のCSSを用意します。ファイルはjQuery AdImageZoomer.cssからダウンロードできますが、30行にも満たないので直接HTMLに書き込んでもいいかもしれません。なお、ブラウザ間の表示の違いを防ぐためCSSリセットを推奨します。

#ad-image-zoomer { margin: 20px; position: relative; overflow: hidden; } #ad-image-zoomer img { position: absolute; left: 0px; top: 0px; z-index: 1; width: auto; height: auto; } #ad-image-zoomer div { padding: 5px 0; position: absolute; left: 0px; top: 0px; z-index: 2; text-align: center; color: #FFF; background-color: #000; }

広告画像を設置する

広告画像のHTMLへの埋め込みは手動作業となりますが、以下の短いコードを書くだけです。DIV要素のID属性名にad-image-zoomerとつけて、その子要素にリンクと画像を指定します。

画像ファイルはその一部が拡大表示されたときを想定して、広告の表示サイズより大きめのサイズにするといいでしょう。また、altを指定してユーザビリティに配慮しましょう。

<div id="ad-image-zoomer"> <a href="http://www.amazon.co.jp"><img src="image/photo/kaden_center.png" alt="家電特価セール" /></a> </div>

jQueryプラグインを実行する

ここまで準備ができたら、最後にjQueryプラグインを実行させるためのコードを書きます。記述箇所はHTMLに直接埋め込む場合、body終了タグの直前にユーザースクリプトを記述します。外部ファイルとして読み込むときは、前述のjQuery本体とプラグインファイルの後にユーザースクリプトのファイルを記述します。

ウェブページのロード終了後にプラグインが実行されるように、jQueryオブジェクト（$）に渡した無名関数の中にスクリプトを記述します。jQueryオブジェクトに#ad-image-zoomerのセレクタを指定し、adImageZoomerメソッドを実行します。

そのとき必ずオプションをハッシュで渡します。オプションのプロパティはscale、width、height、fixedPAR、loop、caption、timelineがあります。

scaleは、広告画像の本来のサイズに対して、どの程度縮小表示するかを0.0-1.0のあいだの数値で指定します。1.0にすると、本来の画像サイズで表示され、0.1とすると元画像の10%のサイズで表示されます。たとえば、元画像の横幅が600px、縦が400pxのとき、scaleを0.1にすると、広告画像は横幅60px、縦40pxのサイズに縮小表示されます。このプロパティを指定すると、widthやheightといった他のサイズ指定プロパティは無視されます。

widthは、ピクセル単位で広告画像の横幅を指定します。heightは画像の縦幅を同様にピクセル単位で指定します。これらのプロパティが指定されていないと、広告サイズは元画像のサイズになります。

widthとheightでサイズを指定すると画像の縦横比が変化しますが、fixedPARにtrueを渡すと縦横比を元の比率に自動で調整します。fixedPARを指定する場合、widthとheightの両方を同時に指定できません。どちらか一方を基準にして調整が行われます。

loopにtrueを指定すると、最後のアニメーションが終わったとき最初に戻って拡大アニメーション繰り返します。

captionは、最初に表示される全体画像に対するキャプションを指定します。なお、timelineプロパティ内にも同様のプロパティがあります。

timelineには、個々のアニメーションの内容を配列形式で指定します。それぞれのアニメーションはcaptionとcoordsプロパティからなるハッシュで表し、captionに説明文を、coordsにアニメーションの詳細を指定します。

coordsは、まず広告画像の拡大部分の左上の座標をxとyで指定します。単位はパーセンテージかピクセルで可能です。ピクセルは数値で、パーセンテージは10%のように文字列で指定します。次に拡大画像の横幅wと縦幅hを指定します。同様にピクセルかパーセンテージでの指定になります。これらはパーセンテージ指定を推奨します。広告画像のサイズを後で変更するときcoordsプロパティを変更する必要がなくなるからです。また、拡大画像は広告画像の縦横比と同じになるので、wとhはどちらか一方しか指定できません。どちらかの値を元に拡大画像のエリアを確定します。

 

プラグイン実行のサンプルコード $(function () { $('#ad-image-zoomer').adImageZoomer({ scale: 0.4, //width: 220, //fixedPAR: true, loop: true, caption: '家電特価セール', timeline: [ {caption: 'ミニコンポ', coords: {x: '-8%', y: '65%', w: '35%'}}, {caption: '洗濯機', coords: {x: '33%', y: '28%', w: '45%'}}, {caption: 'オーブンレンジ', coords: {x: '72%', y: '70%', w: '35%'}}, {caption: '液晶テレビ', coords: {x: '5%', y: '46%', w: '55%'}}, {caption: '冷蔵庫', coords: {x: '40%', y: '0%', w: '70%'}} ] }); });