loupe.js

Loupe.js 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+, Chrome, IE 6+ and Safari. On older browsers, it'll degrade and your visitors won't notice a thing.

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
.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
.toggle(canvas.id);

Remove functionality from image
.remove(canvas);

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

Demonstration

Shows what "loupe.js" does.

Zoom Effect (Caribbean) Frame Effect (Mona Lisa) Xray Effect (Homer) Print Effect (G5)

Why use Javascript Image Loupe?

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

History

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

License

Loupe.js is distributed under this LICENSE. 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.

Images used are copyrighted and are used for demonstration only.

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