Simple Image Panner and Zoomer

[toritobravo]

1) Script Title: Simple Image Panner and Zoomer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...imagepanner.js

3) Describe problem: The script is great but I can not make it work on mobile phones.
Anybody can help me?
Thanks in advance

[djr33]

Can you please link us to the script demo page? The current URL is broken (it contains "..." instead of the real address) and it is to a Javascript file rather than the information page.

Generally, some scripts just don't work on mobile phones due to differences in input (for example, having no keyboard). Aside from that, it should work well on the best (newest) phones, such as the iPhone, which has a full working version of Safari on it, that uses Javascript in the same way as Safari on the computer does. Some other mobile phones may just not support Javascript well.

Also, if this is a problem on your website (and NOT on the demo page on this website), then please link us to your website so we can find out what is wrong.

[toritobravo]

Oh sorry!!

The script is in http://www.dynamicdrive.com/dynamici...magepanner.htm

In PC working fine with IE, Firefox, Chrome and Opera

But in iPhone and Samsung Galaxy with Android no work the panner system
I'm experimenting with a site adaptable to various fixed and mobile platforms and the scrip is ideal for my idea at the time of displaying a picture.
The link to my test page is this

thanks!!!

[jscheuer1]

Don't mobile devices do that anyway? If so we could simply disable the script for mobile devices.

[toritobravo]

Thanks John, but keep looking for a solution.
I have much interest in doing work on mobile devices.

[jscheuer1]

Well, you might need to give them touch events, but I believe simply removing the script for them would allow their native touch capabilities to be used for the purposes of this script (zooming and panning).

That could be done by testing for the browsers these devices use and having the script return without doing anything if those browsers are detected.

[djr33]

At least on an iPhone, zooming and panning around an image is easy (although the rest of the page would zoom/pan with it. That's not a real problem, though).

If you really want it to work only for that image, here's a cool script although it doesn't work perfectly. (The 'up' motion is actually down, and there is no up effect because 'down' doesn't do anything. Left and right work fine though.) It seems to work at least for the iPhone. I haven't tested on other devices.
http://www.netcu.de/jquery-touchwipe...e-ipad-library

[jscheuer1]

That's what I thought. You really should think twice, three times or more about replacing a native capability with a scripted one. Ordinary browsers on ordinary computers can do this too, but it's not so easy or intuitive (requires clicks on menus and/or icons or dragging a slider, plus using the arrow keys or scrollbars) and there's generally much more screen real estate, so the script is appropriate for them. I'm pretty sure most mobiles have touch where you can spread two fingers to zoom and drag one finger to pan, or something else easy to accomplish something like that because, well they need to.

So, something like (at the end of the script, addition highlighted):

if (!/android|blackberry|iphone|ipod|mini|palm|series60|symbian|windows ce/i.test(navigator.userAgent))
jQuery(document).ready(function($){ //By default look for DIVs with class="pancontainer"
	var $pancontainer=$('div.pancontainer')
	$pancontainer.each(function(){
		var $this=$(this).css({position:'relative', overflow:'hidden', cursor:'move'})
		var $img=$this.find('img:eq(0)') //image to pan
		var options={$pancontainer:$this, pos:$this.attr('data-orient'), curzoom:1, canzoom:$this.attr('data-canzoom'), wrappersize:[$this.width(), $this.height()]}
		$img.imgmover(options)
	})
})

You could even add an else after that to change the css on the images if need be so they could be scaled to a size that works for mobiles.

[toritobravo]

Thank you very much for your help.
Consrguido I have not run it, but I'm looking to see if it jqueryMobile combine both and make the system using your fingers.
If I succeed I will publish it in case someone needs to use it.
Best Regards