【jQuery】画像を虫眼鏡でズームさせられるOKZoomプラグイン

2015.02.22   6160


大きい画像を載せて細部まで見てもらいたいけど、それだと画像が大きすぎてページデザインがおかしくなってしまう。でも細部まで見せたい…
特にECサイトなどでよく見かけるUIですよね。画像をマウスオーバーすると大きい画像になって商品の細かい部分まで見られるみたいなやつです。
今回はそんな画像ズーム系プラグインの中のOKZoomを紹介します。

OKZoomプラグインのオススメ/ポイント

  •   虫眼鏡風に画像を思いのままにズーム出来る
  •   画像にIDやクラスを指定して簡単に実装可能
  •   もちろん四角くズームも可能

OKZoomプラグインのデモ


OKZoomプラグインのページ


OKZoomプラグインの使い方

それではOKZoomプラグインの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード


チェックポイント

画像に任意のIDを付ける。

CSSコード


チェックポイント

widthやhightを実際の画像より小さくするのがポイント

JavaScriptコード






チェックポイント

ルーペのボーダーや影はお好みで設定してくださいね。

プラグインへ一言

現実世界では虫眼鏡は子供の時に黒い紙に太陽の光を集めてチリチリする時以来使ってないかも…

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております