Javascript for zooming and panning an image

Question

I have a requirement in the project I am working on for a piece of JavaScript which will allow the user to pan over and zoom in and out of a large image.

Unfortunately, my experience with JavaScript is limited.

Does anybody know of a free script out there which would satisfy my requirements?

Answer 1

I don't know if you are able to make use of any libraries like jQuery or Prototype/Scriptaculous, which may increase your available options.

That said, this sample from Todd Ditchendorf is really cool and has no external dependencies:

http://ditchnet.org/dhtmlgallery/izoom/

Answer 2

There is a jquery ZoomImage plug-in to my opinion which would be good use for this case..Examples for code are here or here.

There is one that also uses a zoom toolbar next to the image

Answer 3

Have a look at the examples of Shadowbox.

Answer 4

Check out SeaDragon AJAX here:

http://livelabs.com/seadragon-ajax/

It's the same 'deep zoom' tech that's used in PhotoSynth, but it's done entirely in Javascript. There's a pre-built viewer control that you can embed in your pages and there's a tool for creating the multi-level images, too, so you needn't be a ninja Javascript coder to get started. It's 100% HTML and JS.

Using the Silverlight viewer will get you smoother zooming, but if your client is against plug-ins, then the AJAX solution is probably the way to go.

I hope this helps.