Caribbean (simple)

Mona Lisa (frame)

Mosaic (multiple)

Images used are copyrighted and are used for demonstration only.

Download shiftzoom.js and include it into your webpages HEAD section.

<script type="text/javascript" src="shiftzoom.js"></script>

// only if the cursor images for IE are not in the current path
<scriptscript type="text/javascript">
  shiftzoom.defaultCurpath='images/cursors/';
</script>

To add shiftzoom just set the event onload="shiftzoom.add(this);" to an div surrounded image.

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

Mouse- and Keyboard-driven handling:

		zoom in				zoom in				zoom in*
		zoom out				zoom out				zoom out*

Keyboard-driven handling: (if focused through mouse over image)

		pan left				pan left (fast)				pan left (slow)
		pan right				pan right (fast)				pan right (slow)
		pan up				pan up (fast)				pan up (slow)
		pan down				pan down (fast)				pan down (slow)
		zoom in*				zoom in (fast)				zoom in
		zoom out*				zoom out (fast)				zoom out

Set defaults

shiftzoom.defaultFading     = true; //BOOLEAN startup image fading
shiftzoom.defaultButtons    = true; //BOOLEAN left top buttons
shiftzoom.defaultZoom       = 0; //INT/FLOAT 0-100 (%) zooming percentage
shiftzoom.defaultXpos       = 50; //INT/FLOAT 0-100 (%) horizontal position
shiftzoom.defaultYpos       = 50; //INT/FLOAT 0-100 (%) vertical position
shiftzoom.defaultOpacity    = 70; //INT 0-100 (%) zoom button opacity
shiftzoom.defaultMillisec   = 30; //INT 5-100 zoom interval delay
shiftzoom.defaultIntitle    = 'zoom in'; //STR zoom in button title text
shiftzoom.defaultOuttitle   = 'zoom out'; //STR zoom out button title text
shiftzoom.defaultCurpath    = ''; //STR cursor path (*.cur) IE only
shiftzoom.defaultShowcoords = false; //BOOLEAN show coordinates
shiftzoom.defaultPixelcoords= true; //BOOLEAN show pixel coords instead of Lat/Lon
shiftzoom.defaultOverview   = true; //BOOLEAN show overview
shiftzoom.defaultOvsfact    = 25; //INT 10-50 (%) overview size factor
shiftzoom.defaultOvaopac    = 75; //INT 0-100 (%) overview area opacity
shiftzoom.defaultOvacolor   = 'red'; //STR overview area css color
shiftzoom.defaultOvbcolor   = 'white'; //STR overview border css color
shiftzoom.defaultOvborder   = ''; //INT 0-20 (px) or "" overview border width

Add functionality to image

shiftzoom.add(image[, options]);

image  == div surrounded image

options         e.g. {overview: true, opacity: 32, ...}

fading     == BOOLEAN true or false Default: true
buttons    == BOOLEAN true or false Default: true
zoom       == INT/FLOAT 0 - 100 Default: 0
xpos       == INT/FLOAT 0 - 100 Default: 50
ypos       == INT/FLOAT 0 - 100 Default: 50
opacity    == INT 0 - 100 Default: 90
millisec   == INT 5 - 100 Default: 40
intitle    == STRING Default: 'click or press shift key to zoom in'
outtitle   == STRING Default: 'click or press alt key to zoom out'
curpath    == STRING Default: ''
showcoords == BOOLEAN true or false Default: false
pixelcoords== BOOLEAN true or false Default: true
overview   == BOOLEAN true or false Default: true
ovsfact    == INT 10 - 50 Default: 25
ovaopac    == INT 0 - 100 Default: 75
ovacolor   == STRING '#ffaa00' or 'orange' Default: 'red'
ovbcolor   == STRING '#0000ff' or 'blue' Default: 'white'
ovborder   == INT 0 - 20 Default: automatic

Get some informations

FLOAT|INT = shiftzoom.get(image, ['maxzoomx'|'maxzoomy'|'maxwidth'|'maxheight']);

Modify some defaults

shiftzoom.set(image, ['buttons'|'overview'|'showcoords'|'pixelcoords'], [true|false]);

Modify current source image

shiftzoom.source(image, value, boolean);
value == URI (e.g. 'images/world.jpg')
boolean == fade out/in (true or false)

Modify current zooming

shiftzoom.zooming(image, value);
value == 0 - 100 (%) default: 0

Modify current position

shiftzoom.moveto(image, x, y);

x,y default: 0,0

if x or y == INT e.g. 189
then it's interpreted as pixel from within natural image dimension
if x or y == STR e.g. '50%' Pattern: (INT|FLOAT)%
then it's interpreted as percentage
if x or y == STR e.g. '-23.057' Pattern: (+|-)(INT|FLOAT)
then it's interpreted as longitude or latitude

Remove functionality from image

shiftzoom.remove(image);

Examples

<img onLoad="shiftzoom.add(this);" ...>
shiftzoom.add(document.getElementById('img'));
if(typeof $=='undefined') {function $(v) {return(document.getElementById(v));}}
shiftzoom.add($('img'));
shiftzoom.add($('img'), {fading:false, curpath:'cursors/'});
shiftzoom.set($('img'),'overview',false);
alert(shiftzoom.get($('img'),'maxwidth'));
shiftzoom.source($('img'),'images/world.jpg',false);
shiftzoom.zooming($('img'),100);
shiftzoom.moveto($('img'),'50%','50%');
shiftzoom.remove($('img'));

• Fast and easy to implement. Just add onload="shiftzoom.add(this);" to the image.
• Makes large images completely visibly through small page-areas.
• Supports an extensive mouse and keyboard control for pan and zoom.
• Works and looks really well. Doesn't require additional resources.
• Free of charge use on non-commercial and private web sites.

In very old browsers, the script degrades and your visitors won't notice a thing.

Please read the License before you download shiftzoom.js 1.9

Please read the Frequently Asked Questions before you contact the author.

Operas cursor handling sucks. IE needs external cursor images (*.cur).

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. The differences in detail:

• Firefox: Works as expected
• Opera: It's impossible to prevent the context menu from showing up
• Safari: Won't fire the onmouseup event (instead oncontextmenu)
• IE: Currently only tested with Apples Mighty Mouse (emulated PC)

Version 1.9

• Added user command source

• Added default buttons

• Added default xpos, ypos and zoom
• Added user commands get and zooming

• Added user commands set and moveto

• Added mouse support for wheel and middle/right button
• Added tooltip help (keyboard support)

• Added support for showing coordinates

• Added keyboard support for pan and zoom

• Added fading zoom factor info

• Added navigation by dragging the rectangle of the overview

• Initial Release

Please leave any comments at this contact formular.

shiftzoom.js is distributed under the Netzgestade Non-commercial Software License Agreement.
License permits free of charge use on non-commercial and private web sites only under special conditions (as described in the license). This license equals neither "open source" nor "public domain". There are also Commercial Software Licenses available.

YOU AGREE TO ALL CONDITIONS OF THIS LICENCE AGREEMENT CONCERNING THE USE OF THE SOFTWARE BY ACCEPTING THIS LICENCE.
IF YOU DO NOT AGREE TO ALL CONDITIONS OF THIS AGREEMENT, YOU SHALL NOT INSTALL THE SOFTWARE, OR USE IT IN OTHER WAYS.