<html>
<head>
<title>Magic Zoom Plus: Zoom & Expand positions</title>
<!-- link to magiczoomplus.css file -->
<link href="magiczoomplus/magiczoomplus.css" rel="stylesheet" type="text/css" media="screen"/>
<!-- link to magiczoomplus.js file -->
<script src="magiczoomplus/magiczoomplus.js" type="text/javascript"></script>
<script type="text/javascript">
MagicZoomPlus.options = {
'pan-zoom': false,
'expand-size': 'width=480'
}
</script>
</head>
<body>
<table width="100%">
<tr>
<td>
<p>Right zoom position, expand to centre of screen (default)</p>
<a href="images/harley1c.jpg" class="MagicZoomPlus" rel="zoom-position: right; zoom-height: 213px;"><img src="images/harley1b.jpg"/></a>
</td>
<td>
<p>Bottom zoom position, expand to top right corner of image</p>
<a href="images/harley2c.jpg" class="MagicZoomPlus" rel="zoom-position:bottom;zoom-height:213px;expand-position: top=0, right=0; expand-align: image;"><img src="images/harley2b.jpg"/></a>
</td>
</tr>
<tr>
<td>
<p>Top zoom position, expand to bottom left corner of image</p>
<a href="images/harley1c.jpg" class="MagicZoomPlus" rel="zoom-position:top;zoom-height:213px;expand-position: bottom=0, left=0; expand-align: image;"><img src="images/harley1b.jpg"/></a>
</td>
<td>
<p>Left zoom position, expand to bottom right corner of screen</p>
<a href="images/harley2c.jpg" class="MagicZoomPlus" rel="zoom-position:left;zoom-height:213px;expand-position: bottom=0, right=0;"><img src="images/harley2b.jpg"/></a>
</td>
</tr>
<tr>
<td>
<p>Inner zoom, expand to the centre of image</p>
<a href="images/harley1c.jpg" class="MagicZoomPlus" rel="zoom-position: inner; expand-position: center; expand-align: image;"><img src="images/harley1b.jpg"/></a>
</td>
<td>
<p>Place zoom window anywhere on your page</p>
<!-- define a place for zoom window -->
<div id="zoomWindow" style="position: absolute; left: 20px; top: 242px"></div>
<a href="images/harley2c.jpg" class="MagicZoomPlus" rel="zoom-position: #zoomWindow; zoom-width: 178px; zoom-height: 430px;"><img src="images/harley2b.jpg"/></a>
</td>
</tr>
</table>
</body>
</html>