EasyZoom

JavaScript

タッチ対応で画像拡大やパンもできるjQueryプラグイン「EasyZoom」

EasyZoomはタッチにも対応したモバイルフレンドリーな、画像拡大やパンができるjQueryプラグインです。画像にカーソルを乗せるだけで拡大され、カーソルを動かすだけで好きな位置の拡大画像をチェックできます。

EasyZoom

デモ

デモページでは、Overlay、Adjacent、With thumbnail images、Active/Inactive toggleの4つのサンプルが用意されています。

1枚の画像にマウスオーバーして拡大画像をチェックするものや拡大された部分を通常画像の隣に表示するもの、またはサムネイルから画像を切り替えれたり拡大機能の有効・無効を切り替えたりできるものまで、いろいろあります。

操作がとてもシンプルで、画像にカーソルを乗せるだけで拡大画像がローディング&表示されます。そして、カーソルを動かすだけで見たい部分へ自由自在に移動できるのが便利ですね。

さらに、EasyZoomはタッチにも対応しているのが特徴です。実際にiPhoneで動作を確認してみましたが、画像にタッチすると拡大され、タッチしたまま動かすことで好きな位置の拡大画像を見ることができます。

これはかなり便利ですね。画像を拡大するために、いちいちピンチアウトする必要がないので効率的に画像の細部をチェックできます。

また、マークアップをとてもシンプルに記述できるのもうれしいポイントの一つです。拡大された画像パスはaタグへ、そしてスタンダードなサイズの画像はimgタグへ指定します。これらを「easyzoom」というクラス名を付与したdivで括るだけです。

オプションもいくつかあり、loadingNotice、errorNotice、errorDuration、linkAttribute、preventClicks、onShow、onMove、onHideといった項目のセッティングが可能です。そのほか、APIも用意されているので、気になる人はぜひチェックしてみてはいかがでしょうか?

というわけで、タッチにも対応したモバイルフレンドリーな画像拡大jQueryプラグイン「EasyZoom」のご紹介でした。

EasyZoom

関連記事

  1. Animated menu concept

    JavaScript

    かっこいいアニメーション付きメニュー実装「Animated menu concept」

    Animated menu conceptはかっこいいアニメーション付…

  2. tingle.js

    JavaScript

    シンプルで手軽に実装できるモーダルウィンドウ「tingle.js」

    tingle.jsは、シンプルなモーダルウィンドウを実装できるスクリプ…

  3. jQuery Equal Height

    JavaScript

    異なる要素の高さを揃えてくれる「jQuery Equal Height」

    jQuery Equal Heightは、異なる要素の高さをキレイに揃…

  4. Inspiration for Menu Hover Effects
  5. no-image

    JavaScript

    指定したテキストをハイライトとタイピング効果で表示できる「typeLighter.js」

    typeLighter.jsは、指定したテキストをハイライトとタイピン…

最近の記事

  1. F7U070bt
  2. 生きている玄米と玄米酵素ブレンド雑穀
  3. BOOST↑CHARGE Apple Watch用モバイルバッテリー

アーカイブ

PAGE TOP