Multiple images

Buy now  £39 Get support

NOTE: The click to enlarge feature only works when this page is served from localhost or a webserver (view this example online).

Swap between many images and magnify them.

Switch images on click (default) Adidas Black
Adidas Black Adidas Blue Adidas Red
Switch images on hover Adidas Black
Adidas Black Adidas Blue Adidas Red
 
  1. <html>
  2.     <head>
  3.         <title>Magic Magnify Plus: Multiple images</title>
  4.        
  5.         <!-- link to magicmagnifyplus.css file -->
  6.         <link rel="stylesheet" href="magicmagnifyplus/magicmagnifyplus.css" type="text/css" media="screen, projection"/>
  7.         <!-- link to magicmagnifyplus/magicmagnifyplus.js file -->
  8.         <script src="magicmagnifyplus/magicmagnifyplus.js" type="text/javascript"></script>
  9.        
  10.     </head>
  11.     <body>
  12.        
  13.         <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/example8.html">view this example online</a>).</p>
  14.         <p>Swap between many images and magnify them.</p>
  15.         <div class="w50">
  16.             Switch images on click (default)
  17.             <!-- define Magic Magnify Plus -->
  18.             <a href="images/shoe_large.jpg" class="MagicMagnifyPlus" id="Magnifier1"><img alt="Adidas Black" src="images/shoe_small.jpg"/></a> <br/>
  19.             <!-- selectors -->     
  20.             <a href="images/shoe_large.jpg" rel="Magnifier1" rev="images/shoe_small.jpg" ><img alt="Adidas Black" src="images/sel.jpg"/></a>
  21.             <a href="images/shoe_large1.jpg" rel="Magnifier1" rev="images/shoe_small1.jpg" ><img alt="Adidas Blue" src="images/sel1.jpg"/></a>
  22.             <a href="images/shoe_large2.jpg" rel="Magnifier1" rev="images/shoe_small2.jpg" ><img alt="Adidas Red" src="images/sel2.jpg"/></a>
  23.         </div>
  24.         <div class="w50">
  25.             Switch images on hover
  26.             <!-- define Magic Magnify Plus -->
  27.             <a href="images/shoe_large.jpg" class="MagicMagnifyPlus" rel="thumb-change:mouseover;thumb-change-delay:0;change-time:0;" id="Magnifier2"><img alt="Adidas Black" src="images/shoe_small.jpg"/></a> <br/>
  28.             <!-- selectors -->     
  29.             <a href="images/shoe_large.jpg" rel="Magnifier2" rev="images/shoe_small.jpg" ><img alt="Adidas Black" src="images/sel.jpg"/></a>
  30.             <a href="images/shoe_large1.jpg" rel="Magnifier2" rev="images/shoe_small1.jpg" ><img alt="Adidas Blue" src="images/sel1.jpg"/></a>
  31.             <a href="images/shoe_large2.jpg" rel="Magnifier2" rev="images/shoe_small2.jpg" ><img alt="Adidas Red" src="images/sel2.jpg"/></a>
  32.         </div>
  33.         <div class="clear">&nbsp;</div>
  34.        
  35.        
  36.     </body>
  37. </html>