#image pan

Zoom In/Out Images With JavaScript – zoomist.js

zoomist.js is a tiny JavaScript library for zoom and panning images using the mouse wheel & drag. Also supports custom zoom controls like sliders and buttons. The library allows users to interact with the content of the image by changing its magnification level. It does not require any external dependencies such as jQuery or other libraries that might conflict with your application codebase. How…

svg-toolbelt is a lightweight JavaScript library that adds interactive, zoomable, and pannable experiences to any SVG. Key Features: Smooth Zoom & Pan: Offers mouse-wheel zoom (to cursor), click-drag panning, pinch-to-zoom, touch-drag, and keyboard navigation (+/- for zoom, arrows for pan, 0 to reset). On-Screen Controls: Provides buttons for zoom in/out, reset, and fullscreen. These are…

svg-pan-zoom is a simple JavaScript library that adds interactive zooming and panning to your SVGs, whether they’re embedded using object element or displayed inline. It can be useful for interactive maps, technical diagrams, or any detailed SVG graphics that require closer inspection. More Like This: SVG Object Panning And Zooming Library – svg-pan-zoom-container Panning and Zooming Any…

Zoomy.js is a tiny JavaScript plugin for adding smooth zooming and panning experiences to images on your sites or web apps. Whether it’s a high-definition photograph, a detailed graphic design, or an intricate data visualization, Zoomy.js ensures your users can explore every nook and cranny with ease and precision. How to use it: 1. Download and import the Zoomy.js into the document. <script…

An ultra-light (less than 1kb) jQuery inner zoom plugin for magnifying and panning an image within its original container.

Demo

Download

Minimal Image Panning Library – LC-Mouse-Drag

A tiny image panning JavaScript library that provides a smooth drag-to-pan functionality on images. Supports both mouse drag and touch swipe events. How to use it: 1. Import the lc-mouse-drag.js JavaScript library into the document. <script src="lc-mouse-drag.js"></script> 2. Initialize the library on the image container as follows: <div id="inner"> <img src="demo.webp"…

AlottaZoom is a smooth pan and zoom plugin that zooms in/out an image and pans/moves it to a different image area with mouse or by clicking custom controls.

Demo

Download

dragZoom is a lightweight and cross-browser image zoom & pan plugin which applies zoom-on-wheel and pan-on-drag functionalities to images you specify.

Demo

Download