CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Craig Francis
Craig Francis

Reputation: 1935

JavaScript image zoom and pan (drag)

Any recommendations on zooming a large image and panning around? ideally inline on the page.

I've been using PanoJS (aka GSV2), but now more people are using iPhone/iPad/Android type devices, this library is either too slow, or the older versions do not support dragging (the one I'm using at the moment).

http://code.google.com/p/panojs/

http://www.dimin.net/software/panojs/

My current thought is that using the tiled images approach is too much for these little processors (at maximum zoom trying to drag 144 individual images, from a 3000 x 3000px original image, where each tile is 250x250px).

So probably looking more at loading the original image in an with a set width/height... and either writing my own JS to zoom/drag, or using another library (which I can't seem to find at the moment)... then there is the question of using jQuery (with jQuery UI for draggable support), or just writing the raw JS myself to keep the amount of code down.

Upvotes: 2

Views: 24090

Answers (3)

DJDaveMark
DJDaveMark

Reputation: 2855

After looking around for this too, I decided to use OpenSeadragon (New BSD licence), an open-source, web-based viewer for high-resolution zoomable images (desktop and mobile). I needed it for the Image Pyramid sources with Multi-Image support and filtering capabilities (via one of a multitude of plugins)

Another strong contender was OpenLayers (2-Clause BSD). Here's a simple example with a static image, and here's the complete list of examples.

Upvotes: 0

Craig Francis
Craig Francis

Reputation: 1935

More so answering my own question, as the standard libraries don't seem to work as well as I needed, I ended up creating my own solution:

https://github.com/craigfrancis/zoomify

The intention is that you can copy this code and then customise it to your own particular requirements... so ideally you should be able to read/understand the code, rather than just dropping it into your project and hoping for the best.

Upvotes: 10

Tschallacka
Tschallacka

Reputation: 28722

I would suggest making a viewport for mobile devices of screen width.

set all the images that are outside the viewport for more than one tile to display:none. Then when the user pans just update the display property.

That way the browser will mainly compute a large element moving with a few images, and then compute the on and off state of some images.

a lot less graphics intensive than to recalculate a graphics heavy div element.

Upvotes: 0

Related Questions