Zoomable image on webpage

**siran** · 31 August 2016, 08:36 AM

Here is an updated version of my tests. Support for mouse wheel and some support for touch devices were added.
Tested on vertical supersite, so the code moved to the site head.
Testing on the tablet has really been a pain.

As you can see in the example there no longer needs to be a slider and track, and the parameters may be left empty. Please ask if something needs to be explained.
See example online here.
Maybe someone has a chance to test on other mobile devices and tell if there are problems?

**siran** · 31 August 2016, 10:57 AM

I am very sorry. Just noticed there is a problem with IE11. Was testing with IE9, FF, Chrome and Opera all the time.
Here is a slightly updated version. In the mouse wheel event handlers there now is an additional call of stopPropagation as IE11 seems to ignore preventDefault for wheel events.

**Egg Bramhill** · 31 August 2016, 11:48 AM

Hi Siran, all three examples work fine on my desktop, but on my iPad the zoom works to an extent but it's not possible to pan.

**siran** · 31 August 2016, 01:30 PM

Thanks for testing Egg!
Sorry to hear about the problems on iPad. Any idea what might go wrong (anyone)? Unfortunately I have no Apple device to test on.

**Egg Bramhill** · 03 September 2016, 03:18 PM

Okay, Zooming & Panning now Siran on iPad & iPhone 4.

However panning can move the image away from the zoom bar at full zoom out.

Here's a screengrab:

**Egg Bramhill** · 03 September 2016, 03:28 PM

Perhaps you need to set up limits to stop the image moving out of the display window, but this wouldn't be simple as it would need to be set dependant on the zoom settings.

**siran** · 03 September 2016, 05:04 PM

Thank you again for testing!
How far can you move it away? That might be what I intended.
At the moment it is only ensured that the central pixel of the viewport is covered by the picture. That should be the same on desktop browsers.
Would you prefer it to stay in the viewport when zoomed out? Can try to reimplement that behavior.

For all those that might be irritated what we are talking about, Egg was so kind to test a development version.

**siran** · 04 September 2016, 05:25 AM

With Egg's help I have added support for iPad now. And the dragging of the image now considers the edges of the viewport rather than it's center.
The problem with the iPad seems to have been that during dragging the browser fires mouse events. These were interfering with the way the drag operation was handled.
So the trick is to stop listening to mouse events when a touch event is received.
Unfortunately this will also disable mouse events for users that have touch and mouse devices in use at the same time. Not sure if that might be a problem.

Please have a look at the online example

During debugging I have created a javascript function that allows to display simple debug output on the screen, please ask if you are interested in that.