Magic Zoom™

Examples

Zoom alignment

Buy now Get support

Right position, Top alignment

Bottom position, Right alignment

Top position, Left alignment

Left position, Center alignment

Top position, Center alignment

Left position, Bottom alignment

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic Zoom: Zoom alignment</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 position, Top alignment</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: 360px;"><img src="images/r1-red-2.jpg"/></a>
  19.                 </td>
  20.                 <td>
  21.                     <p>Bottom position, Right alignment</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-align: right; zoom-width: 460px; zoom-height: 170px;"><img src="images/r1-black-2.jpg"/></a>
  24.                 </td>
  25.             </tr>
  26.             <tr>
  27.                 <td>
  28.                     <p>Top position, Left alignment</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-align: left; zoom-width: 460px;  zoom-height: 170px;"><img src="images/r1-blue-2.jpg"/></a>
  31.                 </td>
  32.                 <td>
  33.                     <p>Left position, Center alignment</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-align: center; zoom-height: 360px;"><img src="images/r1-red-2.jpg"/></a>
  36.                 </td>
  37.            </tr>
  38.             <tr>
  39.                 <td>
  40.                     <p>Top position, Center alignment</p>
  41.                     <!-- define Magic Zoom for top position of zoom window -->
  42.                     <a href="images/r1-black-3.jpg" class="MagicZoom" rel="zoom-position: top; zoom-align: center; zoom-width: 460px;  zoom-height: 170px;"><img src="images/r1-black-2.jpg"/></a>
  43.                 </td>
  44.                 <td>
  45.                     <p>Left position, Bottom alignment</p>
  46.                     <!-- define Magic Zoom for left position of zoom window -->
  47.                     <a href="images/r1-blue-3.jpg" class="MagicZoom" rel="zoom-position: left; zoom-align: bottom; zoom-height: 360px;"><img src="images/r1-blue-2.jpg"/></a>
  48.                 </td>
  49.            </tr>
  50.         </table>
  51.        
  52.     </body>
  53. </html>