• かちびと.net

    画像にマウスホバーするとズームする拡大鏡っぽいやつを簡単に実装できる2KBの軽量jQueryプラグイン・loupeのご紹介。軽量でクロスブラウザ対応です。導入も楽。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

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

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

loupe


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

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

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


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

コード

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

<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>

マークアップはこの2通り。a要素の場合はhref属性を見に行くみたいですが、現状ではクリックしてもリンク先に飛んでくれません。飛ばすには少し工夫しないとですね。

ダウンロードは以下よりどうぞ。

loupe on github

URL :
TRB :

Comments & Trackbacks (2)

Ads

Posts

Contact

Services