CVI
loupe.js 2.0 allows you to add photorealistic loupes (magnifier) to images on your webpages. The design is changeable by use of an image editing program. It uses unobtrusive javascript to keep your code clean.

It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari, Chrome and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing.

Demonstration


Click to see what loupe.js can do.
Zoom Effect (Caribbean)
Zoom Effect (Caribbean)
Frame Effect (Mona Lisa)
Frame Effect (Mona Lisa)
Xray Effect (Homer)
X-Ray Effect (Homer)
Print Effect (G5)
Print Effect (G5)

Images used are copyrighted and are used for demonstration only.

Setting Up

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

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

Using It

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

<div>
<img id="..." onload="loupe.add(this);" src="..." width="356" height="205" alt="...">
</div>

Usage

Set defaults
loupe.defaultResopath  = 'images/loupe/'; //STRING path to image resources (loupe.png|lense.png|icon.png)
loupe.defaultVisible   = false; //BOOLEAN visiblity on startup
loupe.defaultRadius    = 100; //INT/FLOAT 0-100 lense radius (%) of loupe min(height/width)
loupe.defaultXpos      = 8; //INT/FLOAT 0-n (px) horizontal offset of the lense
loupe.defaultYpos      = 6; //INT/FLOAT 0-n (px) vertical offset of the lense
loupe.defaultXview     = 0; //INT/FLOAT 0-n (px) horizontal start position
loupe.defaultYview     = 0; //INT/FLOAT 0-n (px) vertical start position
loupe.defaultCrosshair = false; //BOOLEAN show crosshair
loupe.defaultOpacity   = 25; //INT/FLOAT 0-100 (%) crosshair opacity
loupe.defaultColor     = '#0000ff'; //STRING crosshair color
loupe.defaultName      = ''; //STRING (canvas name|id)

Add functionality to image
loupe.add(image[, options]);
image  == div surrounded image
options         e.g. {visible: true, opacity: 25, ...}
resopath  == STRING Default: 'images/loupe/'
visible   == BOOLEAN true or false Default: false
radius    == INT/FLOAT 0 - 100 Default: 100
xpos      == INT/FLOAT 0 - n Default: 8
ypos      == INT/FLOAT 0 - n Default: 6
xview     == INT/FLOAT 0 - 100 Default: 0
yview     == INT/FLOAT 0 - 100 Default: 0
crosshair == BOOLEAN true or false Default: false
opacity   == INT/FLOAT 0 - 100 Default: 25
color     == STRING Default: '#0000ff'
name      == STRING Default: ''

Toggle visibility
loupe.toggle(canvas.id);

Remove functionality from image
loupe.remove(canvas);

Examples
<img onload="loupe.add(this);" ...>
loupe.add(document.getElementById('img'));
if(typeof $=='undefined') {function $(v) {return(document.getElementById(v));}}
loupe.add($('img'), {name:'magnifier', resopath:'loupes/'});
<button type="button" onclick="loupe.toggle('magnifier');"> toggle </button>
alert('loupe: '+loupe.version+' ('+loupe.released+')');
loupe.remove($('magnifier'));

Why use Javascript Image Loupe?

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

Download

Please read the license before you download loupe.js 2.0

F.A.Q.

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

History

Version 2.0

Version 1.34 Version 1.32 Version 1.3 Version 1.2 Version 1.1 Version 1.0

Contact

Please leave any comments at this contact formular.

License

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

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