Magic Zoom Plus™

Examples

Activate/Initialize

Buy now  £39 Get support

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

Cool bike!

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 Plus: Activate/Initialize</title>
  4.        
  5.         <!-- link to magiczoom.css file -->
  6.         <link href="magiczoomplus/magiczoomplus.css" rel="stylesheet" type="text/css" media="screen"/>
  7.         <!-- link to magiczoom.js file -->
  8.         <script src="magiczoomplus/magiczoomplus.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 Plus with click-to-active option -->
  16.         <a href="images/harley1c.jpg" title="Cool bike!" rel="click-to-activate: true" class="MagicZoomPlus"><img src="images/harley1b.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 Plus with click-to-initialize option -->
  21.         <a href="images/harley2c.jpg" title="Cool bike!" rel="click-to-initialize: true" class="MagicZoomPlus"><img src="images/harley2b.jpg"/></a>
  22.        
  23.     </body>
  24. </html>