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:

  1. <div><img onLoad="shiftzoom.add(this);" width="400" height="200" .../></div>

Posted by Dion Almaer at 11:15 am

4 rating from 79 votes


Comments feed TrackBack URI

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.

Comment by Fyzbo — June 30, 2008

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.

Comment by cwolves — June 30, 2008

Minus key doesn’t work for me in FF3. And like cwolves, I tried to drag the red box.

Comment by Nosredna — June 30, 2008

Ajaxian keeps loosing post content for some reason… last week it was the YUI Autogrid, and now its this post.

Comment by Jon Hartmann — July 1, 2008

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.

Comment by ucanmexwise — July 1, 2008

Wish I could see the post, but by the description it sounds like something UIZE has in its draggable image port…
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.

Comment by uize — July 1, 2008

OK, I added some explanation copy.

Comment by uize — July 1, 2008

Navigation by dragging the rectangle of the overview is done in the new version 1.1

Comment by ucanmexwise — July 2, 2008

As long as Ajaxian can not find the content for shiftzoom, jump directly to

Comment by ucanmexwise — July 2, 2008

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

Comment by ucanmexwise — July 13, 2008

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

Comment by ucanmexwise — July 28, 2008

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

Comment by ucanmexwise — August 9, 2008

Leave a comment

You must be logged in to post a comment.