imgViewer2

JavaScript

画像のズームとパン機能を備えたjQueryプラグイン「imgViewer2」

imgViewer2は画像のズームとパン機能を備えたjQueryプラグインです。Googleマップのように、スクロールやボタンから画像の拡大・縮小ができたり、ドラッグしながら拡大した画像を移動できたりといったことが可能です。

imgViewer2

デモ

デモページに表示されている画像内にある「+」と「-」ボタンから、画像を拡大したり縮小したりできます。そのほか、Googleマップのように上下にスクロールすることでも拡大・縮小が可能です。

拡大された画像は、ドラッグすることで好きな位置に移動させることができます。サクサクと動作するのでとても使い勝手がいいですね。

またタッチにも対応しており、スマホからだとピンチアウトやピンチインを行うことで画像の拡大・縮小ができます。もちろん「+」「-」ボタンからの操作もOKです。タップしてドラッグすることで簡単にパンができるので、スマホでの操作性もバッチリですね。

オプションには、dragable、zoomable、zoomStep、zoomMax、onClick、onReadyといった項目が用意されています。

カスタマイズ性や拡張性にも優れているので、ハイクオリティな画像ズーム機能を実装したい人は、ぜひ「imgViewer2」を使われてみてはいかがでしょうか?

imgViewer2

Sticky Slider Navigation(Responsive)スクロールでナビゲーションバーが移動する「Sticky Slider Navigation(Responsive)」前のページ

画面上部に美しいプログレスバーを表示できる「topbar」次のページtopbar

関連記事

  1. Cube-jQuery-Slider

    JavaScript

    3Dキューブなスライダーを実装できる「Cube-jQuery-Slider」

    Cube-jQuery-Sliderは、3Dキューブなスライダーを実装…

  2. BetterToggle

    JavaScript

    要素を拡大しながら表示させたり非表示にしたりできるjQueryプラグイン「BetterToggle」…

    面白いjQueryプラグインがあったのでご紹介します。指定した要素を拡…

  3. Tendina

    JavaScript

    簡単で素早くドロップダウンメニューを実装できるjQueryプラグイン「Tendina」

    TendinaというjQueryプラグインを使えば、とても簡単で素早く…

  4. JavaScript

    ボタンやアイコンに素敵なクリックエフェクトを実装できる「Waves」

    ボタンやアイコンに素敵なクリックエフェクトを実装することができる「Wa…

  5. qpScroll
  6. no-image

    JavaScript

    シンプルな円形のカラーピッカーを実装できる「jQuery-Colorwheel」

    jQuery-Colorwheelはシンプルな円形によるカラーピッカー…

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP