WIZARD-CODEウィザード・コードJavaScriptとAjaxメインのサイトです。AdImageZoomerはウェブページに広告画像を表示させるときに、自動でその画像の拡大アニメーションを行うスクリプトです。ひとつの画像に複数のフォーカスしたい箇所があるとき、たとえば商品がいくつも載っている画像の場合、画像に写っている商品をそれぞれ順番にクローズアップさせます。画像の拡大アニメーションと同時に商品説明のためのキャプションが表示されます。デモページ⇒家電製品の拡大アニメーションウェブページへの設置方法スクリプトを外部ファイルとして読み込むAdImageZoomer.jsはjQueryのプラグインとして動作します。デモで使用されているjQueryのバージョンは10.2です。これよりも下位のバージョンについては、Firefoxで1.4以上で動作することを確認しています。HTMLに以下のように外部読み込みするJavaScriptファイルを記述します。jQueryはGoogleなどのホスティングサービスを利用するのがいいでしょう。AdImageZoomer.jsはサイトのサーバー上にアップロードします。AdImageZoomer用のCSSを用意します。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はどちらか一方しか指定できません。どちらかの値を元に拡大画像のエリアを確定します。