demo 1: large image linked
the code:
<a id="demo-1" href="bigimage.jpg">
<img src="smallimage.jpg" />
</a>
$('#demo-1').loupe();
loupe is a lightweight (~1k minified) onhover image magnifier for jQuery. just download jquery.loupe.min.js and initialize it like:
$('selector').loupe({
width: 200, // width of magnifier
height: 150, // height of magnifier
loupe: 'loupe' // css class for magnifier
});
the selector should reference links containing thumbnail images, or images shrunk by the browser. the settings (width, etc.) are optional. some demos:
the code:
<a id="demo-1" href="bigimage.jpg">
<img src="smallimage.jpg" />
</a>
$('#demo-1').loupe();
the code:
<img id="demo-2" src="bigimage.jpg" />
$('#demo-2').loupe();
