webページの限られたスペースで、画像をあまり大きく表示できず、拡大表示して商品説明や解説などを加えたいことがあります。そんなとき、使えそうなjQueryのスクリプトを見つけたので備忘録を兼ねて紹介します。

オリジナルはサンプル画像が画面左上に寄り気味ですが、画面全体の座標を表示するので、座標の原点である左上近くを使っているものと思われます。これをこのページではセンターに持ってくるため、iframeを使用しています。また、htmlのほかにJS、CSSも多少変更しています。

拡大表示と書きましたが、実際は拡大している訳ではなく、拡大したように見える画像のほうが実サイズで、初期表示サイズの画像のほうを縦横サイズで25%程度に縮小しています。使用画像は縦横1200px。

使い方： オレンジ色の枠（横502px、縦302px）の中にマウスのカーソルが入ると疑似拡大します。その際、下側にオレンジ色の枠の左上を原点としたX、Yの座標が表示されます。