CVI
shiftzoom.js 3.9 allows you to add zoom and pan functionality to oversized images on your webpages. It also allows you to build interactive applications through the various user commands. It uses unobtrusive javascript to keep your code clean.

It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Chrome, Safari and IE 6+. Works also on older browsers supporting images/ createElement/ getElementById, else it'll degrade and your visitors won't notice a thing.

Demonstration


Click to see what shiftzoom.js can do.
caribbean
Caribbean (simple)
fruits
Fruits (ken burns)
world
World (icons)
mosaic
Mosaic (multiple)

Images used are copyrighted and are used for demonstration only.

Setting Up

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>

Using It

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:

shiftleft mouse  zoom in    mouse wheel  zoom in    middle mouse  zoom in* 
altleft mouse  zoom out    mouse wheel  zoom out    right mouse  zoom out* 
* must be set through preferences by Firefox and Opera (gecko/presto)

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

left  pan left    shiftleft  pan left (fast)    altleft  pan left (slow) 
right  pan right    shiftright  pan right (fast)    altright  pan right (slow) 
up  pan up    shiftup  pan up (fast)    altup  pan up (slow) 
down  pan down    shiftdown  pan down (fast)    altdown  pan down (slow) 
plus  zoom in*    end  zoom in (fast)    pgdn  zoom in 
minus  zoom out*    home  zoom out (fast)    pgup  zoom out 
* not supported by Firefox and Opera (gecko/presto)

Stick/Finger-driven handling: (touch events)

Usage

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.defaultWheelinvert= false; //BOOLEAN makes zoom behaviour identical with Google Maps
shiftzoom.defaultWheelstep  = 20; //INT/FLOAT 0-100 (%) wheel step size percentage
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.defaultRelativecoords=false; //BOOLEAN relative instead of absolute pixel 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.defaultForcetouchui=false; //BOOLEAN forces touch UI over the mouse UI if both available
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
wheelinvert== BOOLEAN true or false Default: false
wheelstep  == INT/FLOAT 0 - 100 Default: 20
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
relativecoords==BOOLEAN true or false Default: false
pixelcoords== BOOLEAN true or false Default: true
percentcoords==BOOLEAN true or false Default: false
forcetouchui==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'|'relativecoords'|'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);

Why use Javascript shiftzoom?

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

Download

Please read the license before you download shiftzoom.js 3.9

F.A.Q.

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

Restrictions

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

iOS (iPod/iPad/iPhone) Resource Limits (Quote):
"JPEG images can be up to 32 megapixels due to subsampling, which allows JPEG images to decode to a size that has one sixteenth the number of pixels. JPEG images larger than 2 megapixels are subsampled—that is, decoded to a reduced size. JPEG subsampling allows the user to view images from the latest digital cameras."

Android zooming (pinch gesture). Currently not, because android emulator do not support multiple finger gestures!

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:

History

Version 3.9

Version 3.8 Version 3.7 Version 3.6 Version 3.5 Version 3.4 Version 3.3 Version 3.2 Version 3.1 Version 3.05 Version 3.0 Version 2.66 Version 2.64 Version 2.62 Version 2.6 Version 2.5 Version 2.4 Version 2.3 Version 2.2 Version 2.1 Version 2.0 Version 1.9 Version 1.8 Version 1.7 Version 1.6 Version 1.5 Version 1.4 Version 1.3 Version 1.2 Version 1.1 Version 1.0

Contact

Please leave any comments at this contact formular.

License

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.

Other Projects

shiftzoom.netzgesta.de © 2014 by Christian Effenberger feed   twitter   facebook   myspace   delicious   digg   reddit   magnoliacom   newsvine   furl   google   yahoo   blinklist   mister-wong