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

// only if the image "loupe.png" is not in the current path
<scriptscript type="text/javascript">var loupePath="imagepath/";</script>
// else only this lines...
<script type="text/javascript" src="loupe.js"></script>
<!--[if gte IE 6]>
<scriptscript type="text/javascript">var loupePath="vml/";</script>
<script type="text/javascript" src="vml/loupe.js"></script>
<![endif]-->



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

<div>
<img id="..." onLoad="initLoupe(this.id);" src="..." width="356" height="205" alt="...">
</div>


Usage

    * Function initLoupe(arg1[,arg2][,arg3][,arg4][,arg5])
    * setting the image through image id:
      Required Parameter arg1 e.g. this.id or "imgname" - default=null
    * setting the startup visibility of the loupe:
      Optional Parameter arg2 e.g. true - default=false
    * setting the starting horizontal viewpoint in px for the loupe:
      Optional Parameter arg3 e.g. 0-imagewidth - default=0
    * setting the starting vertical viewpoint in px for the loupe:
      Optional Parameter arg4 e.g. 0-imageheight - default=0
    * setting the crosshair visibility of the loupe:
      Optional Parameter arg5 e.g. true - default=false