オンカーソル（マウスオーバー）で画像をズーム（拡大）できるようにする「jQuery image zooming plugin」を試してみた。アマゾンなどで商品の表示に使われているようなズームに近い効果を可能にするプラグインだ。
オンカーソルで拡大というのは、こんな感じ。最初にサンプルをどうぞ。
「jQuery image zooming plugin」を使うにはまず公式サイトから一式ダウンロードしてくること。
＜公式サイト＞
[browser-shot url=”http://www.jacklmoore.com/zoom/” width=”300″]
手っ取り早く動かしたければ、ZIP解凍してできたフォルダを丸ごとftpで自サイトに送って、フォルダ内のdemo.htmlにアクセスすればサンプルが見られる。
サンプルを見ると分かるように、このプラグインの動作は４通りから選べる。冒頭で表示したサンプルのようなマウスオーバーで無条件拡大という動作が１つだが、それ以外に、
◇マウスの左ボタンでホールドしている間だけ拡大・移動
◇マウスの左ボタンをクリックすると拡大・移動モード、もう一度クリックで解除
◇マウスクリックした付近を拡大し、もう一度クリックすると解除
というパターンがあるので、用途によって効果を使い分けるといいだろう。