SVGPan: a Javascript SVG (Viewer) Pan/Zoom/Drag library. Some time ago the need for a browser-compatible vectorial language pushed me to consider the SVG markup language (I won’t say anything about Internet Explorer – it’s just unsupported there).
The language itself is great, but, as a beginner, I was so disappointed about the fact that on the Internet I couldn’t find ANY library ready to use for panning and zooming features that I had to write one from scratch. The SVGPan library features: Panning (pan à la Google maps) (click on the white background and pan)Zooming (using the mouse wheel)Element dragging (click on a drawing element and drag it somewhere else)Combinations of the above like zooming while dragging The resulting javascript library is published here, in the hope that someone can find it useful.
The library itself is very small and easy to use; and it’s licensed under the BSD license. You can also open the demo in a new page and download the SVGPan library here. If you found this code useful please consider donating! Professor Cloud. Dynamic Drive DHTML Scripts- Simple Image Panner and Zoomer. March 25th, 10': Updated with ability to zoom in/out of image Description: Simple Image Panner lets you partially clip and confine large images on your site to a smaller container to save space, with the hidden portion accessible by dragging -or panning- inside the image.
The optional zoom feature lets the user zoom in and out of the image at the same time. This script is great for embedding large images on your page that users may also want to zoom in on to get a closer look. Demos (Drag inside image to see more. First and 2nd image zoomable as well): Directions Step 1: Add the below code inside the <HEAD> section of the page: The above code references an .js external file plus two images which you should download below (right click, and select "Save As"): Step 2: Insert the below sample code into the BODY section of your page, which adds 1 pannable image: To make an image pannable, wrap the image inside a DIV with CSS class="pancontainer": You should: Simple Image Panner and Zoomer. Mapbox: the jQuery Map. Most Recent Blog Post:jQuery Mapbox Updated Click to toggle dark text on white Home » Plugins » Mapbox Get latest code here.
Or get the outdated (but still working) version:[ Click here for the mapbox.min.js code - Click here for the uncompressed code ] $().mapbox(). The jQuery mapbox() plugin is for creating relatively small scale, zoomable, draggable maps with multiple layers of content. Mousewheel will zoom the map. . * New feature: by default, the map will now zoom to the cursor position when the mousewheel is used. The code:Before using Mapbox, you must link to jQuery and mapbox.js. Then, some CSS. Then, some HTML. The jQuery: That is all! In addition to the settings, there are some methods that may be passed to any map once it has been created: Here's an example using some of these methods to implement a control panel for the map: Bandwidth costs money. AJAX-ZOOM jQuery Image Zoom Viewer & Pan Gallery, PHP - Javascript 360 Spin & Zoom Rotate. Jquery zoom and pan. ShiftZoom – add zoom and pan functionality to oversized images. ShiftZoom 1.0 – allows you to add zoom and pan functionality to oversized images on your webpages.
It uses unobtrusive javascript to keep your code clean. It works in all the major browsers – Mozilla Firefox 1.5+, Opera 9+, IE 6+ and Safari. Works also on older browsers supporting images/ createElement/ getElementById, else it’ll degrade and your visitors won’t notice a thing. jQuery Pan/Zoom. Just a little experiment, playing with jQuery to make a zoom and pan plug-in.
It's probably not production-ready. E.g., I can't be bothered to test it in Internet Explorer. :-) Demo. Benlumley/jQuery-PanZoom - GitHub. jQuery PanZoom Example - by Ben Lumley. Interactive Map - jQuery over Flash.