<html>
<head>
<title>Magic Magnify: Multiple images</title>
<!-- link to magicmagnify/magicmagnify.js file -->
<script src="magicmagnify/magicmagnify.js" type="text/javascript"></script>
</head>
<body>
<p class="note">The example below must be served from localhost or a webserver <a href="http://demo.magictoolbox.com/magicmagnify/example7.html">example</a>.</p>
<p>Magnify into many different images on the same page.</p>
<div class="w50">
Switch images on click (default)
<!-- define Magic Magnify -->
<a href="images/shoe_large.jpg" class="MagicMagnify" id="Magnifier1"><img alt="Adidas Black" src="images/shoe_small.jpg"/></a> <br/>
<!-- selectors -->
<a href="images/shoe_large.jpg" rel="Magnifier1" rev="images/shoe_small.jpg" ><img alt="Adidas Black" src="images/sel.jpg"/></a>
<a href="images/shoe_large1.jpg" rel="Magnifier1" rev="images/shoe_small1.jpg" ><img alt="Adidas Blue" src="images/sel1.jpg"/></a>
<a href="images/shoe_large2.jpg" rel="Magnifier1" rev="images/shoe_small2.jpg" ><img alt="Adidas Red" src="images/sel2.jpg"/></a>
</div>
<div class="w50">
Switch images on hover
<!-- define Magic Magnify -->
<a href="images/shoe_large.jpg" class="MagicMagnify" rel="thumb-change:mouseover" id="Magnifier2"><img alt="Adidas Black" src="images/shoe_small.jpg"/></a> <br/>
<!-- selectors -->
<a href="images/shoe_large.jpg" rel="Magnifier2" rev="images/shoe_small.jpg" ><img alt="Adidas Black" src="images/sel.jpg"/></a>
<a href="images/shoe_large1.jpg" rel="Magnifier2" rev="images/shoe_small1.jpg" ><img alt="Adidas Blue" src="images/sel1.jpg"/></a>
<a href="images/shoe_large2.jpg" rel="Magnifier2" rev="images/shoe_small2.jpg" ><img alt="Adidas Red" src="images/sel2.jpg"/></a>
</div>
<div class="clear"> </div>
</body>
</html>