Zoom Effect (Caribbean)

Frame Effect (Mona Lisa)

X-Ray Effect (Homer)

Print Effect (G5)

Images used are copyrighted and are used for demonstration only.

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

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

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>

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'));

• Fast and easy to implement. Just add onload="loupe.add(this);" to the image.
• Makes large images completely visibly through small page-areas.
• Works and looks really well. Doesn't require additional resources.
• It's possible to change the design of the loupe by use of a image editing program.
• Free of charge use on non-commercial and private web sites.

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

Please read the license before you download loupe.js 2.0

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

Version 2.0

• Reworked version supports multiple instances
• Added support for different loupe designs and sizes
• Added support for ontouch/ongesture events
• Added support for Internet Explorer 9

• Added support for images with transparency

• IE8 modifications

• Added support for viewpoint start and crosshair

• Added support for Internet Explorer 6/7

• Works even with disabled cache

• Initial Release

Please leave any comments at this contact formular.

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.

•   home  
•   developer  
•   laboratory  
•   mapzoom.js
  Supports zoom & pan for pixel & vector data! It's a conceptual combination of ShiftZoom and Mapper. Requires no plugin/extension or any other external resource!
•   shiftzoom.js
  Supports zoom & pan functionality! The library allows you to add/remove zoom and pan functionality to oversized images on your webpages. 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!
•   booklet.js
  Simulates an authentic looking album or book presenting photos, images and pictures of all sizes and with any aspect ratio. Includes covering, navigation, information, linking and auto generated visual table of contents. Requires no plugin/extension or any other external resource!
•   tripleb.js
  Simulates the CSS 3 beautifying features border-radius, box-shadow and background-gradient 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!
•   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!
•   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!
•   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!
•   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!
•   transm.js
  Supports programmable image transitions! Features 113 transitions, 32 tweenings, individual corners, overlay graphics and event actions. 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!
•   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!
•   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!
•   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!
•   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!
•   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!
•   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!
•   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.