Multiple images

Buy now  £29 Get support

The example below must be served from localhost or a webserver example.

Magnify into many different images on the same page.

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: Multiple images</title>
  4.        
  5.         <!-- link to magicmagnify/magicmagnify.js file -->
  6.         <script src="magicmagnify/magicmagnify.js" type="text/javascript"></script>
  7.        
  8.     </head>
  9.     <body>
  10.        
  11.         <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>
  12.         <p>Magnify into many different images on the same page.</p>
  13.         <div class="w50">
  14.             Switch images on click (default)
  15.             <!-- define Magic Magnify -->
  16.             <a href="images/shoe_large.jpg" class="MagicMagnify" id="Magnifier1"><img alt="Adidas Black" src="images/shoe_small.jpg"/></a> <br/>
  17.             <!-- selectors -->     
  18.             <a href="images/shoe_large.jpg" rel="Magnifier1" rev="images/shoe_small.jpg" ><img alt="Adidas Black" src="images/sel.jpg"/></a>
  19.             <a href="images/shoe_large1.jpg" rel="Magnifier1" rev="images/shoe_small1.jpg" ><img alt="Adidas Blue" src="images/sel1.jpg"/></a>
  20.             <a href="images/shoe_large2.jpg" rel="Magnifier1" rev="images/shoe_small2.jpg" ><img alt="Adidas Red" src="images/sel2.jpg"/></a>
  21.         </div>
  22.         <div class="w50">
  23.             Switch images on hover
  24.             <!-- define Magic Magnify -->
  25.             <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/>
  26.             <!-- selectors -->     
  27.             <a href="images/shoe_large.jpg" rel="Magnifier2" rev="images/shoe_small.jpg" ><img alt="Adidas Black" src="images/sel.jpg"/></a>
  28.             <a href="images/shoe_large1.jpg" rel="Magnifier2" rev="images/shoe_small1.jpg" ><img alt="Adidas Blue" src="images/sel1.jpg"/></a>
  29.             <a href="images/shoe_large2.jpg" rel="Magnifier2" rev="images/shoe_small2.jpg" ><img alt="Adidas Red" src="images/sel2.jpg"/></a>
  30.         </div>
  31.         <div class="clear">&nbsp;</div>
  32.        
  33.     </body>
  34. </html>