Magic Zoom™

Examples

Zoom positions

Inner zoom

Bottom zoom position

Top zoom position

Left zoom position

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="/demo/magiczoom_trial/magiczoom.css" rel="stylesheet" type="text/css" media="screen"/>
  7.             <!-- link to magiczoom.js file -->
  8.             <script src="/demo/magiczoom_trial/magiczoom.js" type="text/javascript"></script>
  9.        
  10.     </head>
  11.     <body>
  12.        
  13.         <table width="100%">
  14.             <tr>
  15.                 <td>
  16.                     <p>Inner zoom</p>
  17.                     <!-- define Magic Zoom for inner position of zoom window -->
  18.                     <a href="/demo/magiczoom_trial/img/r1_red_3.jpg" class="MagicZoom" rel="zoom-position:inner;zoom-fade: true"><img src="/demo/magiczoom_trial/img/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="/demo/magiczoom_trial/img/r1_black_3.jpg" class="MagicZoom" rel="zoom-position:bottom;zoom-height:170px;"><img src="/demo/magiczoom_trial/img/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="/demo/magiczoom_trial/img/r1_blue_3.jpg" class="MagicZoom" rel="zoom-position:top;zoom-height:170px;"><img src="/demo/magiczoom_trial/img/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="/demo/magiczoom_trial/img/r1_red_3.jpg" class="MagicZoom" rel="zoom-position:left;zoom-height:170px;"><img src="/demo/magiczoom_trial/img/r1_red_2.jpg"/></a>
  36.                 </td>
  37.             </tr>
  38.         </table>
  39.        
  40.     </body>
  41. </html>