Magic Zoom™

Examples

Multiple images

Buy now Get support

Zoom into many different images. Each image can have its own settings.

Dissolve effect


Pounce effect


Cross-fade effect


Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic Zoom: Multiple images</title>
  4.        
  5.         <!-- link to magiczoom.css file -->
  6.                 <link href="magiczoom/magiczoom.css" rel="stylesheet" type="text/css" media="screen"/>
  7.                 <!-- link to magiczoom.js file -->
  8.                 <script src="magiczoom/magiczoom.js" type="text/javascript"></script>
  9.        
  10.     </head>
  11.     <body>
  12.        
  13.         <p>Zoom into many different images.  Each image can have its own settings.</p>
  14.        
  15.         <p><a name="dissolve">Dissolve effect</a></p>
  16.  
  17.         <!-- define Magic Zoom -->
  18.         <a href="images/r1-blue-3.jpg" class="MagicZoom" id="Zoomer" rel="selectors-effect-speed: 600" title="Blue Yamaha YZF-R1"><img src="images/r1-blue-2.jpg"/></a> <br/>
  19.  
  20.  
  21.         <!-- selector with own title -->
  22.         <a href="images/r1-red-3.jpg" rel="zoom-id:Zoomer;" rev="images/r1-red-2.jpg" title="Red Yahama YZF-R1"><img src="images/r1-red-1.jpg"/></a>
  23.  
  24.         <!-- selector without title and with own zoom window size -->
  25.         <a href="images/r1-black-3.jpg" rel="zoom-id:Zoomer;zoom-width:400px;zoom-height:200px;show-title: false" rev="images/r1-black-2.jpg" title="Black Yamaha YZF-R1"><img src="images/r1-black-1.jpg"/></a>
  26.                
  27.         <!-- selector with reverse opacity mode -->
  28.         <a href="images/r1-blue-3.jpg" rel="zoom-id:Zoomer;opacity-reverse:true" rev="images/r1-blue-2.jpg"><img src="images/r1-blue-1.jpg"/></a>
  29.  
  30.         <p><a name="pounce">Pounce effect</a></p>
  31.  
  32.         <!-- define Magic Zoom -->
  33.         <a href="images/r1-blue-3.jpg" class="MagicZoom" id="Zoomer2" rel="selectors-effect: pounce" title="Blue Yamaha YZF-R1"><img src="images/r1-blue-2.jpg"/></a> <br/>
  34.         <p style="margin-top: 50px;">
  35.             <a href="images/r1-red-3.jpg" rel="zoom-id:Zoomer2" rev="images/r1-red-2.jpg" title="Red Yahama YZF-R1"><img src="images/r1-red-1.jpg"/></a>
  36.             <a href="images/r1-black-3.jpg" rel="zoom-id:Zoomer2" rev="images/r1-black-2.jpg" title="Black Yamaha YZF-R1"><img src="images/r1-black-1.jpg"/></a>
  37.             <a href="images/r1-blue-3.jpg" rel="zoom-id:Zoomer2" rev="images/r1-blue-2.jpg" title="Blue Yamaha YZF-r1"><img src="images/r1-blue-1.jpg"/></a>
  38.         </p>
  39.        
  40.         <p><a name="fade">Cross-fade effect</a></p>
  41.  
  42.         <!-- define Magic Zoom -->
  43.         <a href="images/r1-blue-3.jpg" class="MagicZoom" id="Zoomer3" rel="selectors-change: mouseover; selectors-effect: fade" title="Blue Yamaha YZF-R1"><img src="images/r1-blue-2.jpg"/></a> <br/>
  44.  
  45.         <a href="images/r1-red-3.jpg" rel="zoom-id:Zoomer3" rev="images/r1-red-2.jpg" title="Red Yahama YZF-R1"><img src="images/r1-red-1.jpg"/></a>
  46.         <a href="images/r1-black-3.jpg" rel="zoom-id:Zoomer3" rev="images/r1-black-2.jpg" title="Black Yamaha YZF-R1"><img src="images/r1-black-1.jpg"/></a>
  47.         <a href="images/r1-blue-3.jpg" rel="zoom-id:Zoomer3" rev="images/r1-blue-2.jpg" title="Blue Yamaha YZF-r1"><img src="images/r1-blue-1.jpg"/></a>
  48.  
  49.  
  50.        
  51.     </body>
  52. </html>