Magic Zoom™

Examples

Disable zoom

Buy now Get support

Disable the zoom effect (e.g. to swap images only)



Disable zoom effect on a certain image


Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic Zoom: Disable zoom</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>Disable the zoom effect (e.g. to swap images only)</p>
  14.        
  15.         <!-- define Magic Zoom -->
  16.         <a href="images/r1-blue-3.jpg" class="MagicZoom" id="Zoomer" rel="selectors-effect-speed: 600; disable-zoom: true;" title="Blue Yamaha YZF-R1"><img src="images/r1-blue-2.jpg"/></a> <br/>
  17.  
  18.  
  19.         <!-- selector with own title -->
  20.         <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>
  21.  
  22.         <!-- selector without title and with own zoom window size -->
  23.         <a href="images/r1-black-3.jpg" rel="zoom-id: Zoomer;" rev="images/r1-black-2.jpg" title="Black Yamaha YZF-R1"><img src="images/r1-black-1.jpg"/></a>
  24.                
  25.         <!-- selector with reverse opacity mode -->
  26.         <a href="images/r1-blue-3.jpg" rel="zoom-id: Zoomer;" rev="images/r1-blue-2.jpg"><img src="images/r1-blue-1.jpg"/></a>
  27.  
  28.         <br/>
  29.        
  30.         <p><a name="dissolve">Disable zoom effect on a certain image</a></p>
  31.  
  32.         <!-- define Magic Zoom -->
  33.         <a href="images/r1-blue-3.jpg" class="MagicZoom" id="Zoomer2" rel="selectors-effect-speed: 600; " title="Blue Yamaha YZF-R1"><img src="images/r1-blue-2.jpg"/></a> <br/>
  34.  
  35.         <!-- selector with own title -->
  36.         <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>
  37.  
  38.         <!-- selector without title and with own zoom window size -->
  39.         <a href="images/r1-black-3.jpg" rel="zoom-id: Zoomer2; disable-zoom: true;" rev="images/r1-black-2.jpg" title="Black Yamaha YZF-R1"><img src="images/r1-black-1.jpg"/></a>
  40.                
  41.         <!-- selector with reverse opacity mode -->
  42.         <a href="images/r1-blue-3.jpg" rel="zoom-id: Zoomer2;" rev="images/r1-blue-2.jpg"><img src="images/r1-blue-1.jpg"/></a>
  43.  
  44.  
  45.        
  46.     </body>
  47. </html>