<html>
<head>
<title>Magic Magnify Plus: Enlargement</title>
<!-- link to magicmagnifyplus.css file -->
<link rel="stylesheet" href="magicmagnifyplus/magicmagnifyplus.css" type="text/css" media="screen, projection"/>
<!-- link to magicmagnifyplus/magicmagnifyplus.js file -->
<script src="magicmagnifyplus/magicmagnifyplus.js" type="text/javascript"></script>
</head>
<body>
<p class="note">NOTE: The click to enlarge feature only works when this page is served from localhost or a webserver (<a href="http://demo.magictoolbox.com/magicmagnifyplus/example7.html">view this example online</a>).</p>
<p>Over 30 options are available to customise the enlarged image, using Magic Thumb™.</p>
<div class="w50">
Dark background
<a href="images/shoe_large.jpg" class="MagicMagnifyPlus" rel="background-color:#000;background-opacity:80;"><img src="images/shoe_small.jpg"/><span>Change the color and opacity of the background around the image.</span></a>
</div>
<div class="w50">
Caption to right
<a href="images/shoe_large.jpg" class="MagicMagnifyPlus" rel="caption-source:#ex-caption; caption-position:right; caption-width:240;"><img src="images/shoe_small.jpg"/></a>
<div id="ex-caption" class="MagicThumb-external-caption">
<p>Place the caption to the top, bottom, left or right.</p>
<p>Captions can use <b>bold</b>, <i>italic</i> and <a href="http://www.magictoolbox.com">can have links</a>.</p>
<p>They can even have images.</p>
<p><img alt="Adidas Black" src="images/sel.jpg"/> <img alt="Adidas Blue" src="images/sel1.jpg"/> <img alt="Adidas Red" src="images/sel2.jpg"/></p>
</div>
</div>
<div class="clear"> </div>
<div class="w50">
Change position
<a href="images/shoe_large.jpg" class="MagicMagnifyPlus" rel="expand-position: bottom:0, left:0;"><img src="images/shoe_small.jpg"/><span>Images can be placed anywhere on the page. This one is set to the top right.</span></a>
</div>
<div class="w50">
Link to URL
<a href="images/shoe_large.jpg" class="MagicMagnifyPlus" rel="link: http://www.magictoolbox.com/magicmagnifyplus/"><img src="images/shoe_small.jpg"/><span>Click the enlarged image above - it links to another URL.</span></a>
</div>
<div class="clear"> </div>
</body>
</html>