画像にマウスホバーするとズームする拡大鏡っぽいやつを簡単に実装できる2KBの軽量jQueryプラグイン・loupe

結構良かったのでご紹介。ECサイトとか
で見かける、マウス乗せると画像が拡大
するやつです。拡大鏡とか言えばいいん
でしょうか？ニーズはそこそこありそう
ですし、かなり軽量で導入も簡単なので
覚えておくと工数減らせるかもですね。

いわゆるルーペ的なものを作れるライブラリで、プラグイン名もまんま「ルーペ」です。2KBとかなり軽量で、圧縮すると1KBちょっと。導入するとクライアントさんもユーザーさんも喜びそうですし、うまく使えばプロダクトの訴求力も上げられるのではないでしょうか。

loupe

こういうやつ。個人的にはこれ付けてくれるとかなり購買意欲湧きます。ECサイトでは現物見れないので写真は大事ですね。

オークションなんかは傷や汚れの関係でトラブルになりやすいので導入してくれるといいんですけどねー。

因みに周りにテキストがあってもそれは拡大しないです。

やっぱりjQuery。IE6でも大丈夫。~~やっぱりイナｂ~~

コード

導入も凄く楽。シンプルなのが一番いいですね。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript" src="jquery.loupe.js"></script>
<script type="text/javascript">$('.foo').loupe();</script>

本体とプラグインとセレクタ指定するだけ。

<img class="foo" src="big-images.jpg" width="191" height="240" />
または
<a class="foo" href="big-images.jpg">
  <img src="small-images.jpg" width="191" height="240" />
</a>