Zoomable image on webpage

[siran]

I was afraid it would not work on touch devices.
This version might work on mobiles (only tested on one Android tablet, just don't have access to other devices).
In the end something like this doesn't really make sense on phones and tablets where you can zoom in and out much better without this. Check it out, I think users of touch devices will not be happy with that.
If you want to support mobiles anyway keep in mind to make your slider BIG.

[gwpriester]

Hi Siran - Can you post a link and we can check it out on our mobile devices.

[siran]

I did, but HERE is a bigger one.
Thanks for checking!

[Egg Bramhill]

Works just fine on my Android & wifes Iphone 4 Siran. Thanks

[gwpriester]

Thumbs up on iPhone 6s.

[gwpriester]

siran - Maybe this is because the image I dropped onto the map is not the same dimensions. But after I enlarge the image then reduce the zoom, the actual image appears smaller than the slider header. Do I need to specify the size of the replacement image? Or maybe the image as it reduces is in relation to where the enlarged image is dragged?

[siran]

Gary, I think it looks like that because the later example doesn't try to center on zoom out.
So the image actually isn't smaller but lies partly outside of the "viewport".
Do you think it should try to center the picture on zoom out? Have a new idea (tried some already) how to do that and will check it.

[gwpriester]

Centered both zooming in and zooming out. I find now when I zoom in, it seems to go upwards rather than towards the center.

[siran]

Thanks for testing Gary and Egg.

Gary, I think the later is because you did not change the placeholder code, so it tries to zoom in to pixel X=800, Y=1400.
Remove the last two values (, 800, 1400) from the parameter list (including the comma before the value 800) and it will zoom in to the center.
Anyway HERE is test version number 4.
It now again tries to the center at zoom out. I'm quite happy with it now.
There is another improvement in this version. It allows to directly use a file name for the first parameter instead of a name you have given to an image in your design.
This way you can (but don't have to) attach the image to any of your objects in your design (in the example the placeholder is used) using CTRL + ALT + SHIFT + A, and it will be uploaded unmodified. In this example I have used a 16 colour PNG for example.
Don't forget to de-attach the file I have attached when attaching your own file by selecting the placeholder and pressing CTRL + ALT + SHIFT + D, otherwise my example file will remain in your document and will be uploaded to your server when publishing.
Alternatively you can create a new placeholder from scratch off course.
So here is the updated description of the placeholder code which in the example looks like this:

<div data-zoomableAttr="map01.png, zoomSlider01, zoomTrack01, 2.0, 1232, 2020"></div>

You may change the values inside of the doublequotes to fit your needs, but you should not change anything else.
The values are very much like before.
1. (map01.png) is the name of a file you attached or the name you have given to an image (in your document) that you want to display zoomable in the viewport (defined by the placeholder).
2. (zoomSlider01) is the name you have given to the slider handle. (This is the object that you can drag horizontally to change the zoom level.)
3. (zoomTrack01) is the name you have given to the slider track. (This is the object that defines the range the zoom handle can be moved. It does not have to be visible.)
4. (2.0) is the maximum zoom level. (Default is 4.0)
5. (1232) is the horizontal pixel position (in the unscaled image) that the code tries to center. (This is ignored if value 6 is missing.)
6. (2020) is the vertical pixel position (in the unscaled image) that the code tries to center.

Values 4 to 6 are optional, but if you want to specify a "zoom to" position you also have to specify the max zoom level.

Don't forget to copy the code at the page head when including the effect in your own document.

[gwpriester]

Will test tomorrow. Time to shut down for the day and have a glass (or two, or three) of wine.