ZooMove

ZooMoveは、マウスオーバーで画像を拡大させてみせることができるjQueryプラグインです。

画像を一部を詳細に見せたいときなどに効果的。この動きは、ネットショップの商品紹介の画像でもよく使われる機能ですね。

こちらのjQueryプラグイン「ZooMove」を利用すると、拡大させる動きも滑らかで、ストレスなく見せることができます。

動きはサンプルをこちらのご覧いただくとわかりやすいと思います。

カーソルを乗せると画像が拡大するjQueryプラグイン「ZooMove」サンプル


ググってみましたが、まだjQueryプラグイン「ZooMove」は日本語では紹介されていませんでした。

でも、使いやすいのでこれから日本でも使われる機会が増えそうな気がします。




設置方法

まずはこちらの「ZooMove」のサイトにある「If you prefer you can just download a ZIP file.」というテキストの下にある「DOWNLOAD ZOOMOVE」というボタンから一式ダウンロードします。

拡大表示させたい画像も用意しておきましょう。

次に<head>部分で必要なファイルを読み込ませます。パスやファイル名に注意して下さい。


画像を表示させたいところに次のように記述します。画像のパスやファイル名に注意してください。


画像を表示させた後にJavaScriptの記述をします。</body>直前でもいいでしょう。


オプションとして、以下があります。
zoo-scale 1.5 (150%) 拡大させる倍率を設定。
zoo-move true マウスの動きによって拡大画像の動かすか。
zoo-over false マウスオバー時に画像の大きさも拡大させるか。

オプションは次のように書くことができます。


あとは、CSSで表示させる画像の幅や高さなどを設定してあげるだけです。

サンプルのソースを以下に書いておきます。どうぞご参考まで。


CSS

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