Magic Zoom™

Examples

Zoom positions

Buy now  £29 Get support

Right (default) zoom position

Bottom zoom position

Top zoom position

Left zoom position

Inner zoom

Place zoom window anywhere on your page

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic Zoom: Zoom positions</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.         <table width="100%">
  14.             <tr>
  15.                 <td>
  16.                     <p>Right (default) zoom position</p>
  17.                     <!-- define Magic Zoom for right position of zoom window -->
  18.                     <a href="images/r1-red-3.jpg" class="MagicZoom" rel="zoom-position: right; zoom-height: 170px;"><img src="images/r1-red-2.jpg"/></a>
  19.                 </td>
  20.                 <td>
  21.                     <p>Bottom zoom position</p>
  22.                     <!-- define Magic Zoom for bottom position of zoom window -->
  23.                     <a href="images/r1-black-3.jpg" class="MagicZoom" rel="zoom-position: bottom; zoom-height: 170px;"><img src="images/r1-black-2.jpg"/></a>
  24.                 </td>
  25.             </tr>
  26.             <tr>
  27.                 <td>
  28.                     <p>Top zoom position</p>
  29.                     <!-- define Magic Zoom for top position of zoom window -->
  30.                     <a href="images/r1-blue-3.jpg" class="MagicZoom" rel="zoom-position: top; zoom-height: 170px;"><img src="images/r1-blue-2.jpg"/></a>
  31.                 </td>
  32.                 <td>
  33.                     <p>Left zoom position</p>
  34.                     <!-- define Magic Zoom for left position of zoom window -->
  35.                     <a href="images/r1-red-3.jpg" class="MagicZoom" rel="zoom-position: left; zoom-height: 170px;"><img src="images/r1-red-2.jpg"/></a>
  36.                 </td>
  37.            </tr>
  38.            <tr>
  39.                <td>
  40.                     <p>Inner zoom</p>
  41.                     <!-- define Magic Zoom for inner position of zoom window -->
  42.                     <a href="images/r1-black-3.jpg" class="MagicZoom" rel="zoom-position: inner; zoom-fade: true"><img src="images/r1-black-2.jpg"/></a>
  43.                </td>
  44.                 <td>
  45.                     <p>Place zoom window anywhere on your page</p>
  46.                     <!-- define a place for zoom window -->
  47.                     <div id="zoomWindow" style="position: absolute; left: 20px; top: 242px"></div>
  48.  
  49.                     <!-- define Magic Zoom -->
  50.                     <a href="images/r1-blue-3.jpg" class="MagicZoom" rel="zoom-position: #zoomWindow; zoom-width: 178px; zoom-height: 430px;"><img src="images/r1-blue-2.jpg"/></a>
  51.                 </td>
  52.            </tr>
  53.         </table>
  54.        
  55.     </body>
  56. </html>