Magic Zoom™

Examples

Multiple images

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

Dissolve 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.css" rel="stylesheet" type="text/css" media="screen"/>
  7.                 <!-- link to magiczoom.js file -->
  8.                 <script src="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>Dissolve effect</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.  
  31.        
  32.         <p>Cross-fade effect</p>
  33.  
  34.         <!-- define Magic Zoom -->
  35.         <a href="images/r1-blue-3.jpg" class="MagicZoom" id="Zoomer2" rel="selectors-effect: fade" title="Blue Yamaha YZF-R1"><img src="images/r1-blue-2.jpg"/></a> <br/>
  36.  
  37.         <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>
  38.         <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>
  39.         <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>
  40.  
  41.        
  42.     </body>
  43. </html>