Magic Zoom™

Examples

Zoom alignment

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