Zoom positions

Buy now 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>