Multiple images


  1. <html>
  2.     <head>
  3.         <title>Magic Zoom Plus: Multiple images</title>
  4.        
  5.         <!-- link to mzp-packed.js file -->
  6.         <script src="mzp-packed.js" type="text/javascript"></script>
  7.         <!-- link to magiczoomplus.css file -->
  8.         <link href="magiczoomplus.css" rel="stylesheet" type="text/css" media="screen"/>
  9.        
  10.     </head>
  11.     <body>
  12.        
  13.         <!-- define Magic Zoom Plus (notice the ID attribute) -->
  14.         <a href="img/hdred-big.jpg" id="zoom1" title="Red Harley" class="MagicZoom MagicThumb"><img src="img/hdred-small.jpg"/></a>
  15.         <br/>
  16.         <!-- notice here how REl attribute references zoom ID -->
  17.         <a href="img/hdred-big.jpg" rel="zoom1" rev="img/hdred-small.jpg" title="Red Harley"><img src="img/hdred-color.jpg"/></a>
  18.         <a href="img/hdgreen-big.jpg" rel="zoom1" rev="img/hdgreen-small.jpg" title="Green Harley"><img src="img/hdgreen-color.jpg"/></a>
  19.         <a href="img/hdblue-big.jpg" rel="zoom1" rev="img/hdblue-small.jpg" title="Blue Harley"><img src="img/hdblue-color.jpg"/></a>
  20.        
  21.     </body>
  22. </html>