Monday, June 30th, 2008
ShiftZoom: Zoomify your oversize images
Category: Canvas, JavaScript
, Library
ShiftZoom 1.0 is the latest tool from Christian Effenberger that allows you to add zoom and pan functionality to oversized images on your webpages. It uses unobtrusive javascript to keep your code clean. Requires no plugin/extension or any other external resource!
It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, IE 6+ and Safari. Works also on older browsers supporting images & createElement & getElementById, else it'll degrade and your visitors won't notice a thing.
It is as simple to use as:
Related Content:
4.1 rating from 76 votes
It seems difficult to use. Zooming requires two click and moving the mouse for the clicks. I feel like there must be a more intuitive interface.
I like the concept, but as Fyzbo stated, the two clicks are counter-productive. It’d be nice if it auto-zoomed to the center of the image AND the red box on the thumbnail was draggable.
Minus key doesn’t work for me in FF3. And like cwolves, I tried to drag the red box.
Ajaxian keeps loosing post content for some reason… last week it was the YUI Autogrid, and now its this post.
This is the first version and suggestions are welcome.
Currently only shift and alt key supports zoom in and zoom out.
Because I have only a single button mouse, I’m unable to make a
solution for right mouse button and mouse wheel at the time.
Navigation by dragging the rectangle of the overview will be done
in next revision.
Wish I could see the post, but by the description it sounds like something UIZE has in its draggable image port…
http://www.uize.com/examples/image-port-zoom-and-pan.html
Sorry for the lack of explanation on the page.. I haven’t gotten to that example yet. Basically, click-and-drag pans, ctrl-click up/down zooms in and out. I guess that could all be made configurable, given the valid points made in comments above. I’m currently working on a more lightweight interaction for Zazzle’s site.
OK, I added some explanation copy.
Navigation by dragging the rectangle of the overview is done in the new version 1.1
As long as Ajaxian can not find the content for shiftzoom, jump directly to http://shiftzoom.netzgesta.de/
ShiftZoom history
Version 1.3: Added keyboard support for pan and zoom
Version 1.2: Added fading zoom factor info
Version 1.1: Added navigation by dragging the rectangle of the overview
ShiftZoom history
Version 1.5: Added mouse support for wheel and middle/right button and tooltip help (keyboard support)
Version 1.4: Added support for showing coordinates
Handling javascript mouse events is not a simple thing, because there are inconsistancies in the way different browsers implement mouse events. That’s the reason why the response on right mouse button is inconsistent in shiftzoom.
If your browser didn’t work as expected, don’t hesitate to contact me.
Christian Effenberger
ShiftZoom history
Version 1.7: Added default xpos, ypos and zoom
Version 1.7: Added user commands get and zooming
Version 1.6: Added user commands set and moveto