Magic Zoom™

Examples

Window dimensions

Buy now Get support

A big window of 500x500 pixels.

A wide zoom window of 400x170 pixels.

Zoom window of 100% of the original (small) image.

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic Zoom: Window dimensions</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.         <div style="float: right;">
  14.             <p>A big window of 500x500 pixels.</p>
  15.             <a href="images/r1-red-3.jpg" rel="zoom-width:500;zoom-height:500; zoom-position: left;" class="MagicZoom"><img src="images/r1-red-2.jpg"/></a>
  16.         </div>
  17.         <div>
  18.             <p>A wide zoom window of 400x170 pixels.</p>
  19.             <!-- define Magic Zoom -->
  20.             <a href="images/r1-black-3.jpg" rel="zoom-width:400;zoom-height:170;" class="MagicZoom"><img src="images/r1-black-2.jpg"/></a>
  21.         </div>
  22.         <div>
  23.             <p>Zoom window of 100% of the original (small) image.</p>
  24.             <a href="images/r1-blue-3.jpg" rel="zoom-width:100%;zoom-height:100%;" class="MagicZoom"><img src="images/r1-blue-2.jpg"/></a>
  25.         </div>
  26.        
  27.     </body>
  28. </html>