Zoomy Jquery Plugin

今回紹介するのは、画像の一部分を虫眼鏡を通したようにズームさせるjQueryプラグイン「Zoomy Jquery Plugin」です。

ネットショップの商品紹介の画像でも使われたりする機能ですね。商品の細かい部分まで伝えることができるようになります。演出的にも面白い機能です。

サンプルを作ってみました。こちらをどうぞ。

→ jQueryプラグイン「Zoomy Jquery Plugin」サンプル

設置の仕方も簡単で、処理も軽くスムーズです。

使い方は続きをご覧ください。


まずはコチラの「Zoomy Jquery Plugin」サイトからjsファイルなど一式ダウンロードします。

同じ画像でサイズの違う大小のイメージファイルを用意しておきます。

次に<head>部分にcssファイルを指定します。パスやファイル名に注意して下さい。

そして</body>の直前に次のようにJavaScriptを設定して準備完了です。

続いて、<body>部分の画像を入れたい部分に画像のコードを追加します。

以上で虫眼鏡のように画像の一部をズームしてくれるようになります。

以下はサンプルページのソースです。ご参考までに。

この記事と関連してると思われる記事: