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

nanogallery2美しくてハイクオリティなイメージギャラリーを実装できる「nanogallery2」前のページ

フルスクリーンナビゲーションを表示できるハンバーガーメニュー実装「jQuery_Overlay_Menu」次のページjQuery_Overlay_Menu

関連記事

  1. Tipso

    JavaScript

    レスポンシブでアニメーションもいい感じのツールチップのjQueryプラグイン「Tipso」

    Tipsoはレスポンシブに対応した軽量でアニメーションもいい感じのツー…

  2. Switchery

    JavaScript

    チェックボックスをiOS7のようなスタイルにしてくれるjQueryプラグイン「Switchery」

    SwitcheryというjQueryプラグインを使えば、チェックボック…

  3. JavaScript

    画面全体に背景を表示させフェードやスライドもできるjQuery「bgStretcher」

    ブラウザの画面全体に背景を表示させることができるjQueryプラグイン…

  4. HC Sticky

    JavaScript

    スクロールしても要素を固定できるJSライブラリ「HC Sticky」

    HC Stickyはスクロールした時に特定の要素を固定したまま表示でき…

  5. Adi.js

    JavaScript

    アドブロックを検知してくれる「Adi.js」

    Adi.jsはアドブロックを検知してくれるjQueryプラグインです。…

  6. ShowMore.js

    JavaScript

    長いコンテンツを折りたためるjQueryプラグイン「ShowMore.js」

    ShowMore.jsは長いコンテンツを折りたたんで表示・非表示を簡単…

最近の記事

  1. 椿屋特製アイス珈琲
  2. 有栖川公園
  3. グーディオ オーガニックチョコレート(ミント)
  4. チキンバターマサラとシュリンプバターマサラ
  5. 恵比寿のダ・ミケーレのピザ

アーカイブ

PAGE TOP