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

    JavaScript

    ふわふわと流れるアニメーション付きの雲を実装できるjQueryプラグイン「jQlouds」

    jQloudsというjQueryプラグインを使えば、ふわふわした雲を実…

  2. TextTailor.js

    JavaScript

    コンテナ内のフォントサイズを自動リサイズしてくれるjQueryプラグイン「TextTailor.js…

    TextTailor.jsはブラウザ幅に合わせてコンテナ内のテキストの…

  3. JavaScript

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「equalize.js」

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「e…

  4. Images grid

    JavaScript

    画像のグリッドレイアウトを製作できるjQueryプラグイン「Images grid」

    Images gridは画像のグリッドレイアウトを製作するためのシンプ…

  5. zelect

    JavaScript

    セレクトボックスをカスタマイズして使いやすくしてくれる「zelect」

    zelectはセレクトボックスをユーザーが使いやすくなるようにカスタマ…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP