loupe.js ShiftZoom.js allows you to add zoom and pan functionality to oversized images on your webpages. It uses unobtrusive javascript to keep your code clean.

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.

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 an div surrounded image.

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

Usage

Set defaults
shiftzoom.defaultFading   = true; //BOOLEAN startup image fading
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.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
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: ''
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

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.remove($('img'));

Demonstration

Shows what "shiftzoom.js" does.

Caribbean (simple) Mona Lisa (frame) Gallery (multiple)

Why use Javascript ShiftZoom?

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

Restrictions

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

History

Version 1.0

License

ShiftZoom.js is distributed under this LICENSE. License permits free of charge use on non-commercial and private web sites only.
There is also a Commercial Software License available.

Images used are copyrighted and are used for demonstration only.

cvi.netzgesta.de  also visit  CVI-lab, S5 Reloaded and AJAX-FilmDB


整理：经典素材网(维奇) http://www.veeqi.com