Permanent Links

Poll

What should be the topic for the next Impossibly Stupid poll?

A Town Square Poll Space

Tech Corner

See Also

[ICO]NameLast modifiedSizeDescription

[PARENTDIR]Parent Directory  -  
[TXT]README.html2014-11-29 10:31 2.8K 
[DIR]click_zoom/2014-11-29 10:33 -  
[   ]info.json2014-12-09 01:41 40  
[   ]tags=play2015-03-26 18:30 0  

It gets bigger when you touch it

Some work I've done on a project probably won't make it to the final version, so I'll drop it off here because it covers something I find impossibly stupid: image zoom/enlarge on the web. With high speed connections the norm, people think nothing of making larger images available, but they really should think more about how they make them available. Here are some things I find annoying about what sites commonly do (if I missed your own pet peeve, please add it to the comments).

Pseudo-zoom
If you have a 300x500 image normally, don't give me a 315x525 image as though it were a useful enlargement. Pick a web template that doesn't force you to provide more detailed images if you don't have them available. This has less to do with the technique and more to do with the source material, but I had to get it off my chest. By contrast, using a zoom itself might not be appropriate if there is a huge size difference between the two images; that calls for dealing with thumbnails, which is different from zooming.
Pop-up windows
I'm not a big fan of dropping extra windows on the user's screen. They are often blocked, although you'll probably be safe if they have to click to see the larger picture. The bigger problem is that they take the user away from the immediate page, so the context is lost (e.g., technical specs in one window, image of the part detail in another window).
Obscuring content
Some of the JavaScript libraries I've seen used accomplish the zoom by putting the larger view over some other part of the page that I'm still interested in seeing. In some ways it's like popping up a window, but it's worse because I usually can't move it somewhere else or control it in any way.
Elaborate and expensive
I suppose if someone is looking to ding you for a $40 JavaScript library they have to cram in a lot of features, but I don't think most users need an image zoom to be rocket science. What I provide here isn't a drop-in solution, but it gives a simple starting point to show how complicated it isn't.

So here is image zooming done impossibly stupid. A click swaps between a large and small picture bound to the same element. Mouse movement is followed so that the enlarged image tracks the small image proportionally. A click returns you to normal.

Using my half-beard image as an example also reminds me to remind you to vote in the beard poll! Time is running out! Only nearly four to eight years left!