Any remendations 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).
/
/
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.
Any remendations 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./p/panojs/
http://www.dimin/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.
Share Improve this question edited Jul 4, 2012 at 21:15 Nikola K. 7,15513 gold badges32 silver badges39 bronze badges asked Jul 4, 2012 at 10:29 Craig FrancisCraig Francis 1,9353 gold badges23 silver badges38 bronze badges 2- This is a very broad question that actually includes several more questions. What exactly do you want to know? What means inline on the page? – WrongAboutMostThings Commented Jul 4, 2012 at 11:36
- @WrongAboutMostThings Thanks for looking and menting, and sorry for the delay (didn't get an email notification)... anyway, I was using those two libraries and neither worked properly on a mobile device, so was asking if anyone had any better alternatives. I ended up having to write my own though which didn't include any libraries (trying jQuery UI for the draggable functionality worked, but there was still a noticeable lag on some of the larger images). – Craig Francis Commented Jul 18, 2012 at 12:14
3 Answers
Reset to default 10More 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./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.
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 pute a large element moving with a few images, and then pute the on and off state of some images.
a lot less graphics intensive than to recalculate a graphics heavy div element.
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 plete list of examples.