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. SweetAlert
  2. jQueryプラグイン

    JavaScript

    jQueryプラグイン・2014年下半期70選まとめ

    今年も残すところ後わずかとなってしまいました。というわけで、2014年…

  3. no-image

    JavaScript

    HTML要素を回転させれる「jquery-ui-rotatable」

    jquery-ui-rotatableはHTML要素を回転させれるjQ…

  4. Cavendish.js

    JavaScript

    CSS transitionsを活用したシンプルなスライドショーを実装できるjQueryプラグイン「…

    CSS transitionsを活用したシンプルなスライドショーを実装…

  5. Tabby

    JavaScript

    軽量でシンプルなタブメニューを実装できるjQueryプラグイン「Tabby」

    とても軽量でシンプルなタブメニューを実装できるjQueryプラグイン「…

  6. jRCarousel

    JavaScript

    モダンエフェクトなレスポンシブ対応のカルーセル実装「jRCarousel」

    jRCarouselはモダンエフェクトなカルーセルを実装できるjQue…

最近の記事

  1. JOK-350 WH
  2. 1460 COLLAR ウォータープルーフ 8ホールブーツ
  3. スターバックス ハウスブレンド

アーカイブ

PAGE TOP