no-image

JavaScript

軽量で操作性もいい画像ズーム機能を実装できる「Simple Image Zoomer jQuery Plugin」

Simple Image Zoomer jQuery Pluginは、軽量・シンプルで操作性もいい画像ズーム機能を実装できるjQueryプラグインです。拡大・縮小バーをスライドさせることでスムーズな画像ズームが可能です。タッチ対応でモバイルフレンドリーなところもうれしいですね。

タッチにも対応

デモ

デモでは画像の左下にズームバーが設置されていて、ここを左右にスライドさせることで画像を拡大・縮小できる仕組みになっています。拡大した画像はドラッグすることで好きな位置へ移動することが可能です。さらにタッチにも対応しているので、スマホやタブレットではタッチにより拡大中の画像の移動が可能です。

ズームはとてもスムーズに動作するのでとても操作しやすいですね。シンプルながらもカスタマイズ性も備えているので、優れた画像ズーム機能を実装したい人は有力な選択肢の一つになるのではないでしょうか?

オプションには、maxLimit、zoomingOriginという項目が用意されています。デフォルト値はmaxLimitが100、zoomingOriginが(0, 0)です。

Simple Image Zoomer jQuery Plugin

関連記事

  1. no-image

    JavaScript

    親要素の下端まで要素を固定表示できる「Scroll With Page」

    Scroll With Pageはスクロールしても特定の要素を固定表示…

  2. Siema

    JavaScript

    軽量でシンプルで依存性のないカルーセルを実装できる「Siema」

    Siemaは軽量でシンプル、そしてjQueryなどの依存性のないカルー…

  3. jquery-confirm

    JavaScript

    アラートやダイアログなどさまざまな機能を実装できる「jquery-confirm」

    jquery-confirmはアラートやconfirm、ダイアログなど…

  4. JavaScript

    レスポンシブに対応している軽量のjQueryスライダー「Unslider」

    とても軽量でレスポンシブにも対応しているjQueryスライダー「Uns…

  5. Timeliny

    JavaScript

    レスポンシブ対応の年ベースによるjQueryタイムライン「Timeliny」

    Timelinyはレスポンシブに対応した年ベースによるタイムラインを実…

  6. jquery.xtr

    JavaScript

    クライアントサイドで変換してくれる「jquery.xtr」

    jquery.xtrはページのリフレッシュなしにクライアントアイドでテ…

最近の記事

  1. cheero USB-C PD Charger 60W
  2. DY-S01
  3. OWL-QI10W04
  4. BQ-CC87L

アーカイブ

PAGE TOP