マウスホイールで画像をズームさせるjQueryプラグイン・jQuery Wheelzoom

Ads

マウスホイールで画像を拡大、ドラ
ッグ操作によるスクロールが可能な
jQueryのプラグイン、jQuery
Wheelzoomのご紹介です。シンプルで
いいですね。IEは9からの対応だそう
なので利用シーンは若干限られそ
うですけど。

マウスホイール操作による画像のズームや、ズーム後にドラッグ操作でスクロールも可能にするスクリプトです。

jQuery Wheelzoom


マウスホイールで画像をズームします。それだけと言えばそれだけなんですけど、結構軽量なので一応覚えておくといいかも。

Sample

動作サンプルですー

ドラッグ操作も可能です。タッチイベントへの対応は・・・別途コードを用意しなきゃかな(確認してない

タッチイベントと合わせてスマフォ向けのECサイトなんかに導入したり、というのも良さそうだけどピンチイン/アウトにも対応しないとですかね、多分。

コード

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script src='jquery.wheelzoom.js' type='text/javascript'></script>

本体とスクリプトを読み込み。

$('#foo').wheelzoom();​

初期化。

<img id='foo' src='http://example.com/bar.jpg' width='500' height='350'>​

画像にセレクタと合わせてidやclassを振れば完了です。

ライセンスはMITとの事です。

jQuery Wheelzoom