rounded

Caribbean (simple)

Fruits (ken burns)

World (icons)

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 a 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*

* must be set through preferences by Firefox and Opera (gecko/presto)

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

* not supported by Firefox and Opera (gecko/presto)

Set defaults

shiftzoom.defaultFading     = true; //BOOLEAN startup image fading
shiftzoom.defaultButtons    = true; //BOOLEAN left top buttons
shiftzoom.defaultNozoom     = false; //BOOLEAN disable zooming feature
shiftzoom.defaultBicubic    = false; //BOOLEAN enable bicubic image interpolation for IE7+
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.defaultInfoblock  = '<dl>...<\/dl>'; //STR Info/Help block content
shiftzoom.defaultCurpath    = ''; //STR cursor path (*.cur) IE only
shiftzoom.defaultLowres     = ''; //STR lowres image (dimension equals elements width and height)
shiftzoom.defaultIcons      = null; //OBJ icon array (see shiftzoom.construct)
shiftzoom.defaultShowcoords = false; //BOOLEAN show coordinates
shiftzoom.defaultPixelcoords= true; //BOOLEAN show Pixel coords instead of Lat/Lon
shiftzoom.defaultPercentcoords=false; //BOOLEAN show percentage instead of Lat/Lon/Pixel coordinates
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
nozoom     == BOOLEAN true or false Default: false
bicubic    == BOOLEAN true or false Default: false
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'
infoblock  == STRING Default: '<dl>...<\/dl>'
curpath    == STRING Default: ''
lowres     == STRING Default: '' (faster zooming)
icons      == OBJECT Default: null (icon array)
showcoords == BOOLEAN true or false Default: false
pixelcoords== BOOLEAN true or false Default: true
percentcoords==BOOLEAN true or false Default: false
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']);
BOOLEAN = shiftzoom.get(image,'playing');
OBJECT = shiftzoom.get(image,'currentxyz');
(returns current x=xpos, y=ypos and z=zoom values as INT/FLOAT 0-100 (%))
FLOAT = shiftzoom.version;
STRING = shiftzoom.released;

Modify some defaults

shiftzoom.set(image, ['buttons'|'overview'|'showcoords'|'pixelcoords'|'zoomin'|'zoomout'|'nozoom'], [true|false]);
(The external zoom button control zoomin|zoomout depends on the settings buttons=false and nozoom=false)

Modify current infoblock

shiftzoom.info(image, value);
value == innerHTML-block (e.g. '<dl>...<\/dl>')

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 lowres source image

shiftzoom.lowsource(image, value);
value == URI (e.g. 'images/world_lowres.jpg')

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

Modify current position and zoom (animated)

shiftzoom.kenburns(image, [x, y, z, e, s, d, c, a]);
x == left position 0 - 100 (%) default: 50
y == top position 0 - 100 (%) default: 50
z == zomm factor 0 - 100 (%) default: 50
e == optional progression 0.0 - 2.0 | 3 default: 1
    [< 1 == ease-out | 1 == linear | > 1 == ease-in | 3 == ease-in-out]
s == optional animation steps 10 - 100 default: max distance/interval delay
d == optional interval delay 10 - 100 default: 30
c == optional callback function name (executes on end of animation) default: ''
a == optional callback argument (string or number only) default: ''
(To use callback and default values for e, s, d set e, s, d to false)

Start playing

shiftzoom.play(image, delay, loop, array, callback);
delay    == delay between play positions 0 - 100000 millisec. default: 0
loop     == loop array true or false default: false
array    == two dimensional array with syntax from kenburns [[x,y,z], [x,y,z,e], [x,y,z,e,s], [x,y,z,e,s,d]...]
callback == optional function name (executes on stop playing)
(Start playing will set buttons, showcoords, overview to false and nozoom to true)

Stop playing

shiftzoom.stop(image);
(Stop playing is also executed on user action through mouse or keyboard)

Add icon(s) to image

shiftzoom.construct(image, object);

object         e.g. [{x: 52, y: 31, ...},{...}]

x      == x position relative to images natural width 0 - n (px) Default: 0
y      == y position relative to images natural height 0 - n (px) Default: 0
w      == icon width 8 - n (px) Default: 0
h      == icon height 8 - n (px) Default: 0
src    == icon #1 image URL Default: ''
src2   == optional icon #2 image URL Default: ''
pos    == optional icon position 0 - 9 Default: 0 (1=left-top, 2=center-top, 3=right-top, 4=center-left, 0/5=center-center, 6=center-right, 7=left-bottom, 8=center-bottom, 9=right-bottom)
id     == optional icon id Default: ''
title  == optional icon tooltip text Default: ''
href   == optional icon link URL Default: ''
target == optional icon link target Default: ''

Remove icon(s) from image

shiftzoom.destruct(image, value);
value == STRING (remove named icon)
value == BOOLEAN (remove all icons)

Remove functionality from image

shiftzoom.remove(image, value);
value == BOOLEAN (reset image to natural dimension)

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);
<button type="button" onclick="shiftzoom.set($('img'),'zoomin',true);"> + </button>
<button type="button" onclick="shiftzoom.set($('img'),'zoomout',true);"> - </button>
alert(shiftzoom.get($('img'),'maxwidth'));
alert('shiftzoom: '+shiftzoom.version+' ('+shiftzoom.released+')');
shiftzoom.info($('img'),'<p>eat my shorts<\/p>');
shiftzoom.source($('img'),'images/world.jpg',false);
shiftzoom.lowsource($('img'),'images/world_lowres.jpg');
shiftzoom.zooming($('img'),100);
shiftzoom.moveto($('img'),'50%','50%');
shiftzoom.kenburns($('img'),[25,75,100]);
shiftzoom.play($('img'),0,true,[[25,75,100],[0,0,0]]));
shiftzoom.stop($('img'));
shiftzoom.construct($('img'),[{x:250,y:75,w:48,h:48,src:'icon.png',id:'ico'}]);
shiftzoom.destruct($('img'),'ico');
shiftzoom.remove($('img'),true);

• Fast and easy to implement. Just add onload="shiftzoom.add(this);" to the image.
• Works even well with 10 Megapixel images (use lowres argument to speed up zooming).
• Makes large images completely visibly through small page-areas.
• Supports an extensive mouse and keyboard control for pan and zoom.
• Supports overlayed and autoscaled icons and timed ken-burns-animations.
• Allows to build interactive applications (e.g. play|stop|construct|destruct). You can build interactive floorplans, complex presentations, image based magazine readers, maps with increased functionality and more.
• 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 3.1

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

Element dimensions should always respect the Aspect Ratio of the image.

Internet Explorer's image scaling through bicubic interpolation is only available in version 7 and up. So don't expect to much (smooth display) from older browsers like IE 5, IE 5.5, and IE 6. IE needs external cursor images (*.cur).

Operas cursor handling sucks. Opera and Safari 1-2 are unable to interpret style sheet percentages properly and exactly.

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 3.1

• Changed the user commands kenburns and play to be consistent.

• Changed the panning to be consistent (independent of using px, % or Latitude-Longitude).

• Totally reworked to support overlayed and autoscaled (interactive) icons
• Added default [icons] and user commands [contruct|destruct]
• Added default [bicubic] for IE7/8 image interpolation mode

• Added support for resetting the image to natural dimension during remove

• Bugfixes

• Added bicubic interpolation support for IE > 6
• Added user command lowsource

• Added support for lowres image (generally)
• Extended user command get (currentxyz)
• Added support for showing coordinates as percentage

• Added support for lowres image (for faster zooming with kenburns)
• Extended user commands kenburns and play with optional callback function

• Added user commands play and stop
• Extended user command kenburns

• Added external zoom button control via user command set (zoomin|zoomout)

• Added user command kenburns
• Added released query

• Added default infoblock
• Added version query

• Added default nozoom
• Added auto focus

• 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.

•   home  
•   developer  
•   laboratory  
•   curl.js
  Simulates a page curl image effect! The script allows you to add curls with individual paperback color, shadow opacity and size to images on your webpages. Requires no plugin/extension or any other external resource!
•   corner.js
  Simulates a whole bunch of image effects! The script allows you to add individual corners, shadings and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
•   filmed.js
  Simulates a film strip look including reflection! The script allows you to add individual colors, shining and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
•   bevel.js
  Simulates a whole bunch of image effects! The script allows you to add bevels with individual glowing, shading and shining to images on your webpages. Requires no plugin/extension or any other external resource!
•   edge.js
  Simulates masked image edges! The script allows you to add individual masks (inc. inbuilt mask) to images on your webpages. Requires no plugin/extension but zero or more external mask images!
•   slided.js
  Simulates a slide frame look including gradients! The script allows you to add individual colors, shadings and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
•   reflex.js
  Simulates a Cover Flow^™ image effect! The script allows you to add individual borders, tiltings and reflections to images on your webpages. Requires no plugin/extension or any other external resource! *Cover Flow is a trademark of Apple Inc.
•   glossy.js
  Simulates a glossy shaded and beveled button look! The script allows you to add individual corners, shadings and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
•   instant.js
  Simulates an instant picture look including tilt! The script allows you to add individual colors, tiltings and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
•   sphere.js
  Simulates a spherical image effect! The script allows you to add an spherical picture effect with individual zooming, shading, shining, transparency and colors to images on your webpages. Requires no plugin/extension or any other external resource!
•   gauge.js
  Supports programmable gauges! The script allows you to add gauges (with shading and reflection) to your webpages. Requires no plugin/extension or any other external resource!
•   mapper.js
  Emulates native area highlighting! The script allows you to add automatic area highlighting to image maps on your webpages (inc. export to SVG). Requires no plugin/extension or any other external resource!
•   snapfit.js
  Supports jigsaw puzzle functionality! The script allows you to add jigsaw puzzles with individual options to images on your webpages. Requires no plugin/extension or any other external resource!
•   busy.js
  Supports native spinner animations! The library allows you to add/remove loading indicators to the viewport and to block-level elements on your webpages. Requires no plugin/extension or any other external resource!
•   loupe.js
  Simulates an authentic looking magnifying glass! The script allows you to add a loupe for magnifying (inc. start viewpoint) to an image on your webpage. Requires no plugin/extension but one external resource image!