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. number-divider.js

    JavaScript

    数字を分割できるjQueryプラグイン「number-divider.js」

    number-divider.jsは数字を分割させることができるjQu…

  2. overhang.jp

    JavaScript

    シンプルでクールな通知バーを実装できるjQueryプラグイン「overhang.jp」

    overhang.jsは、通知バーを実装するためのjQueryプラグイ…

  3. Magnific Popup

    JavaScript

    レスポンシブに対応したLightbox風のjQueryプラグイン「Magnific Popup」

    レスポンシブに対応したLightbox風のjQueryプラグイン「Ma…

  4. no-image

    JavaScript

    ページ読み込み時に画面上部にプログレスバーを表示する「Skylo」

    Skyloはページ読み込み時にプログレスバーを画面上部に表示できるのが…

  5. Shuffle Images

    JavaScript

    画像をシャッフルすることができるjQueryプラグイン「Shuffle Images」

    Shuffle ImagesというjQueryプラグインを使えば、画像…

  6. jQuery Accordion

    JavaScript

    シンプルで実用的なアコーディオン実装「jQuery Accordion」

    とてもシンプルで操作性のよいアコーディオン「jQuery Accord…

最近の記事

  1. cheero Smart USB Charger 48W CHE-320
  2. ブエノカフェ CM-200

アーカイブ

PAGE TOP