Zoomable image on webpage

[Egg Bramhill]

Fantastic! The image scrolls very smoothly but as you say the slider is a bit juddery. A great resource. Thanks for sharing.

[gwpriester]

Brilliant solution siran!

[Boy]

Really nice. Thanks for sharing!

[roly]

Thank you for sharing siran.

Ciao

Roly

[gwpriester]

siran - Love this.

At about 25% the image is at 1:1. Can I limit the percent of zoom? And can I zoom in on a certain point, such as the rose bud?

And when the page first loads the scripts briefly appear. How can I hide the scripts when the page loads?

The image got corrupted in Firefox but looks fine in all other browsers. http://gwpriester.xara.hosting/zoom-test/

[siran]

Hi Gary,
you can limit the zoom factor in the code

var maxZoom=4;

set it to 'var maxZoom=1;' to limit to 1:1 for example.
Maybe that factor could also be set as a parameter in the placeholder code if you wish to have multiple zooming images with different max zoom factors. I could adapt the code if you need that, but I will be away for a few days, so that might take a while...
What do you mean with 'zoom in on a certain point'? Shall the 'pushing around' be disabled and the zoom should try to center a specific pixel? That also could be done by adapting the code and would take a few days.
It surely is possible to hide the code, but it will become a little more complex (for example <div someattrname="<old code>"></div> would do), and off course the code will have to be adapted again...
Strange problem with firefox. Did you observe the problem with both (your and mine) examples?

[gwpriester]

No rush. You can get back when you get back.

Yes, I am having problems with the image disappearing for both my example and yours. I just tried yours and when I got to the maximum slider setting the image disappeared. On my example various things, such as leaving the page and coming back makes the image disappear.

And where do I add the var maxZoom=1; code? (You are dealing with a coding-challenged person) The last time I worked with coding was Basic back in the 80s.

[forresthowie]

This all looks perfect! So many options and, yet again, so much support.
Thank you all
Robert

[siran]

Hi Gary,

finally got back to get back here.

So this is my first attempt to address the issues you pointed to. Please check it out and post back if there are still problems.

The placeholder code has changed and now looks like this:

<div data-zoomableAttr="largeMap01, zoomSlider01, zoomTrack01, 2.0, 800, 1400"></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. (largeMap01) is the name you have given to the large image 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. (800) is the horizontal pixel position (in the unscaled image) that the code tries to center. (This is ignored if value 6 is missing.)
6. (1400) 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.

Please see result online here.

Some things to mention:

The javascript code is placed at the page head, but you can also move it to the placeholder head for example or place it in an external .js file (without the <script> and </script> tags at the beginning and end) and attach that to the placeholder (using CTRL + SHIPT + ALT + A).

The drag operation ends when the mouse button is released or the mouse pointer leaves the HTML body element. (The only simple and consistent cross browser method that worked for me.)
This might not be what you want. You can force the body element to fill the browser window by adding stretching elements (one horizontal and one vertical if required) to your design. If you don't want them to be visible you can make them 99% transparent.

Firefox seems to have a problem with large images. The javascript code (at the page header) uses a workaround to try to address this problem, but still the maximum map picture size might be limited.
There is a theoretical limit of 32767 pixels width and height, but you will get error messages disappearing images or other stragne effects at much lower resolutions.

I have removed the centering to viewport at small zoom levels. That just looks smoother to me. The image can now almost freely be dragged around at any zoom level.

I have made no test on mobile devices.

[gwpriester]

Awesome. Thanks. I'll try it out and let you know how it works.

Does not work on my iPhone however.