First you need to include the jQuery library, since Loupe is a plugin. You can download it from the jQuery website or link it directly from the Google CDN.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
Secondly, you need to include the jQuery Loupe javascript and the css file into your page. You can do it by adding the code below to your page.
<script type="text/javascript" src="js/jquery.loupe.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.loupe.css" />
Next, you implement the actual image(s) that will be magnified/zoomed by the Loupe. The structure is as simple as it can get.
<a href="#"><img alt="Your image caption" src="your-image.jpg" id="loupe1" /></a>
As the last step, you trigger the Loupe function on the element you just created. In this case, we trigger the function on the image with the id loupe1.
<script type="text/javascript">
$(document).ready(function(){
$('#loupe1').loupe({
'max_size' : 600,
'loupe_toggle_time' : 'fast'
});
});
</script>
Options
shape - the shape of the Loupe. Options can be: circle/rounded/square
glossy - if the Loupe is glossy or not. Options: true/false
drop_shadow - if the Loupe will have a drop-shadow effect. Options: true/false
