jQuery AdImageZoomerの概要
jQuery AdImageZoomerはウェブページに広告画像を表示させるときに、自動でその画像の拡大アニメーションを行うスクリプトです。
ひとつの画像に複数のフォーカスしたい箇所があるとき、たとえば商品がいくつも載っている画像の場合、画像に写っている商品をそれぞれ順番にクローズアップさせます。
また、画像の拡大アニメーションと同時に商品説明のためのキャプションが表示されます。
AdImageZoomer デモページ
ウェブページへの設置方法
スクリプトを外部ファイルとして読み込む
AdImageZoomer.jsはjQueryのプラグインとして動作します。デモで使用されているjQueryのバージョンは10.2です。これよりも下位のバージョンについては、Firefoxで1.4以上で動作することを確認しています。
まず、HTMLに以下のように外部読み込みするJavaScriptファイルを記述します。jQueryはGoogleなどのホスティングサービスを利用するのがいいでしょう。AdImageZoomer.jsはサイトのサーバー上にアップロードします。
CSSファイルの設置
次にjQuery AdImageZoomer用のCSSを用意します。ファイルはjQuery AdImageZoomer.cssからダウンロードできますが、30行にも満たないので直接HTMLに書き込んでもいいかもしれません。なお、ブラウザ間の表示の違いを防ぐためCSSリセットを推奨します。
広告画像を設置する
広告画像のHTMLへの埋め込みは手動作業となりますが、以下の短いコードを書くだけです。DIV要素のID属性名にad-image-zoomerとつけて、その子要素にリンクと画像を指定します。
画像ファイルはその一部が拡大表示されたときを想定して、広告の表示サイズより大きめのサイズにするといいでしょう。また、altを指定してユーザビリティに配慮しましょう。
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はどちらか一方しか指定できません。どちらかの値を元に拡大画像のエリアを確定します。
プラグイン実行のサンプルコード