Magic Zoom Plus™

Examples

Zoom positions

Buy now  £39 Get support

Inner zoom, expand to top left corner

Bottom zoom position, expand to top right corner

Top zoom position, expand to bottom left corner

Left zoom position, expand to bottom right corner

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic Zoom Plus: Zoom positions</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.        
  10.     </head>
  11.     <body>
  12.        
  13.         <table width="100%">
  14.             <tr>
  15.                 <td>
  16.                     <p>Inner zoom, expand to top left corner</p>
  17.                     <!-- define Magic Zoom Plus for inner position of zoom window, expand to to left corner -->
  18.                     <a href="images/harley1c.jpg" class="MagicZoomPlus" rel="zoom-position:inner;zoom-fade: true;expand-position: top:0, left:0"><img src="images/harley1b.jpg"/></a>
  19.                 </td>
  20.                 <td>
  21.                     <p>Bottom zoom position, expand to top right corner</p>
  22.                     <!-- define Magic Zoom Plus for bottom position of zoom window, expand to top right corner -->
  23.                     <a href="images/harley2c.jpg" class="MagicZoomPlus" rel="zoom-position:bottom;zoom-height:200px;expand-position: top:0, right:0"><img src="images/harley2b.jpg"/></a>
  24.                 </td>
  25.             </tr>
  26.             <tr>
  27.                 <td>
  28.                     <p>Top zoom position, expand to bottom left corner</p>
  29.                     <!-- define Magic Zoom Plus for top position of zoom window, expand to bottom left corner -->
  30.                     <a href="images/harley1c.jpg" class="MagicZoomPlus" rel="zoom-position:top;zoom-height:200px;expand-position: bottom:0, left:0"><img src="images/harley1b.jpg"/></a>
  31.                 </td>
  32.                 <td>
  33.                     <p>Left zoom position, expand to bottom right corner</p>
  34.                     <!-- define Magic Zoom Plus for left position of zoom window, expand to bottom right corner -->
  35.                     <a href="images/harley2c.jpg" class="MagicZoomPlus" rel="zoom-position:left;zoom-height:200px;expand-position: bottom:0, right:0"><img src="images/harley2b.jpg"/></a>
  36.                 </td>
  37.             </tr>
  38.         </table>
  39.        
  40.     </body>
  41. </html>