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

Menu Button Animationsスマホメニューのアイコンをアニメーション変化させる「Menu Button Animations」前のページ

スタイリッシュで美しいイメージスライダー「Gliding Gallery」次のページno-image

関連記事

  1. stickyNavbar.js
  2. Owl Carousel

    JavaScript

    タッチ操作やレスポンシブにも対応したカルーセルを実装できるjQueryプラグイン「Owl Carou…

    素晴らしいカルーセルを実装できるjQueryプラグインがあったのでご紹…

  3. tingle.js

    JavaScript

    シンプルで手軽に実装できるモーダルウィンドウ「tingle.js」

    tingle.jsは、シンプルなモーダルウィンドウを実装できるスクリプ…

  4. Priority Nav Scroller

    JavaScript

    水平スクロールができるナビゲーション「Priority Nav Scroller」

    Priority Nav Scrollerは水平スクロールを備えたナビ…

  5. Notyf

    JavaScript

    シンプルでレスポンシブ対応のカッコイイ通知を表示できる「Notyf」

    Notyfはシンプルでレスポンシブに対応したカッコイイ通知を表示させる…

  6. Slickhover.js

    JavaScript

    滑らかでスムーズなホバーエフェクトを実装できるjQueryプラグイン「Slickhover.js」

    とても軽量で使いやすいのがいいですね。ホバー時に滑らかでスムーズなエフ…

最近の記事

  1. WiMAX
  2. 甘柿
  3. 冬用のふとん
PAGE TOP