Magic Zoom™

Examples

Activate/Initialize

Use the activate option to show zoom on click instead of hover.

Use the initialize option to download the image upon click (reduces bandwidth usage, but slows the user experience).

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic Zoom: Activate/Initialize</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>Use the activate option to show zoom on click instead of hover.</p>
  14.  
  15.         <!-- define Magic Zoom with click-to-active option -->
  16.         <a href="images/r1-blue-3.jpg" class="MagicZoom" rel="click-to-activate:true"><img src="images/r1-blue-2.jpg"/></a>
  17.  
  18.         <p>Use the initialize option to download the image upon click (reduces bandwidth usage, but slows the user experience).</p>
  19.  
  20.         <!-- define Magic Zoom with click-to-initialize option -->
  21.         <a href="images/r1-red-3.jpg" class="MagicZoom" rel="click-to-initialize:true"><img src="images/r1-red-2.jpg"/></a>
  22.        
  23.     </body>
  24. </html>