Magic Zoom Plus™

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 Plus: Zoom alignment</title>
  4.        
  5.         <!-- link to magiczoomplus.css file -->
  6.         <link href="magiczoomplus/magiczoomplus.css" rel="stylesheet" type="text/css" media="screen"/>
  7.         <!-- link to magiczoomplus.js file -->
  8.         <script src="magiczoomplus/magiczoomplus.js" type="text/javascript"></script>
  9.         <script type="text/javascript">
  10.             MagicZoomPlus.options = {
  11.                 'disable-expand': true,
  12.                 'hint-text': 'Zoom'
  13.             }
  14.         </script>
  15.        
  16.     </head>
  17.     <body>
  18.        
  19.         <table width="100%">
  20.             <tr>
  21.                 <td>
  22.                     <p>Right position, Top alignment</p>
  23.                     <a href="images/harley1c.jpg" class="MagicZoomPlus" rel="zoom-position: right; zoom-height: 400px;"><img src="images/harley1b.jpg"/></a>
  24.                 </td>
  25.                 <td>
  26.                     <p>Bottom position, Right alignment</p>
  27.                     <a href="images/harley2c.jpg" class="MagicZoomPlus" rel="zoom-position: bottom; zoom-align: right; zoom-width: 460px; zoom-height: 170px;"><img src="images/harley2b.jpg"/></a>
  28.                 </td>
  29.             </tr>
  30.             <tr>
  31.                 <td>
  32.                     <p>Top position, Left alignment</p>
  33.                     <a href="images/harley1c.jpg" class="MagicZoomPlus" rel="zoom-position: top; zoom-align: left; zoom-width: 460px;  zoom-height: 170px;"><img src="images/harley1b.jpg"/></a>
  34.                 </td>
  35.                 <td>
  36.                     <p>Left position, Center alignment</p>
  37.                     <a href="images/harley2c.jpg" class="MagicZoomPlus" rel="zoom-position: left; zoom-align: center; zoom-height: 360px;"><img src="images/harley2b.jpg"/></a>
  38.                 </td>
  39.             </tr>
  40.             <tr>
  41.                 <td>
  42.                     <p>Top position, Center alignment</p>
  43.                     <a href="images/harley1c.jpg" class="MagicZoomPlus" rel="zoom-position: top; zoom-align: center; zoom-width: 460px;  zoom-height: 170px;"><img src="images/harley1b.jpg"/></a>
  44.                 </td>
  45.                 <td>
  46.                     <p>Left position, Bottom alignment</p>
  47.                     <a href="images/harley2c.jpg" class="MagicZoomPlus" rel="zoom-position: left; zoom-align: bottom; zoom-height: 360px;"><img src="images/harley2b.jpg"/></a>
  48.                 </td>
  49.             </tr>
  50.         </table>
  51.        
  52.     </body>
  53. </html>