<html>
<head>
<title>Magic Zoom: Window dimensions</title>
<!-- link to magiczoom.css file -->
<link href="magiczoom/magiczoom.css" rel="stylesheet" type="text/css" media="screen"/>
<!-- link to magiczoom.js file -->
<script src="magiczoom/magiczoom.js" type="text/javascript"></script>
</head>
<body>
<div style="float: right;">
<p>A big window of 500x500 pixels.</p>
<a href="images/r1-red-3.jpg" rel="zoom-width:500;zoom-height:500; zoom-position: left;" class="MagicZoom"><img src="images/r1-red-2.jpg"/></a>
</div>
<div>
<p>A wide zoom window of 400x170 pixels.</p>
<!-- define Magic Zoom -->
<a href="images/r1-black-3.jpg" rel="zoom-width:400;zoom-height:170;" class="MagicZoom"><img src="images/r1-black-2.jpg"/></a>
</div>
<div>
<p>Zoom window of 100% of the original (small) image.</p>
<a href="images/r1-blue-3.jpg" rel="zoom-width:100%;zoom-height:100%;" class="MagicZoom"><img src="images/r1-blue-2.jpg"/></a>
</div>
</body>
</html>