Magic Zoom Plus™

Examples

Zoom & Expand positions

Buy now Get support

Right zoom position, expand to centre of screen (default)

Bottom zoom position, expand to top right corner of image

Top zoom position, expand to bottom left corner of image

Left zoom position, expand to bottom right corner of screen

Inner zoom, expand to the centre of image

Place zoom window anywhere on your page

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic Zoom Plus: Zoom &amp; Expand 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.         <script type="text/javascript">
  10.             MagicZoomPlus.options = {
  11.                 'pan-zoom': false,
  12.                 'expand-size': 'width=480'
  13.             }
  14.         </script>
  15.        
  16.     </head>
  17.     <body>
  18.        
  19.         <table width="100%">
  20.             <tr>
  21.                 <td>
  22.                     <p>Right zoom position, expand to centre of screen (default)</p>
  23.                     <a href="images/harley1c.jpg" class="MagicZoomPlus" rel="zoom-position: right; zoom-height: 213px;"><img src="images/harley1b.jpg"/></a>
  24.                 </td>
  25.                 <td>
  26.                     <p>Bottom zoom position, expand to top right corner of image</p>
  27.                     <a href="images/harley2c.jpg" class="MagicZoomPlus" rel="zoom-position:bottom;zoom-height:213px;expand-position: top=0, right=0; expand-align: image;"><img src="images/harley2b.jpg"/></a>
  28.                 </td>
  29.             </tr>
  30.             <tr>
  31.                 <td>
  32.                     <p>Top zoom position, expand to bottom left corner of image</p>
  33.                     <a href="images/harley1c.jpg" class="MagicZoomPlus" rel="zoom-position:top;zoom-height:213px;expand-position: bottom=0, left=0; expand-align: image;"><img src="images/harley1b.jpg"/></a>
  34.                 </td>
  35.                 <td>
  36.                     <p>Left zoom position, expand to bottom right corner of screen</p>
  37.                     <a href="images/harley2c.jpg" class="MagicZoomPlus" rel="zoom-position:left;zoom-height:213px;expand-position: bottom=0, right=0;"><img src="images/harley2b.jpg"/></a>
  38.                 </td>
  39.             </tr>
  40.             <tr>
  41.                 <td>
  42.                     <p>Inner zoom, expand  to the centre of image</p>
  43.                     <a href="images/harley1c.jpg" class="MagicZoomPlus" rel="zoom-position: inner;  expand-position: center; expand-align: image;"><img src="images/harley1b.jpg"/></a>
  44.                 </td>
  45.                 <td>
  46.                     <p>Place zoom window anywhere on your page</p>
  47.                     <!-- define a place for zoom window -->
  48.                     <div id="zoomWindow" style="position: absolute; left: 20px; top: 242px"></div>
  49.  
  50.                     <a href="images/harley2c.jpg" class="MagicZoomPlus" rel="zoom-position: #zoomWindow; zoom-width: 178px; zoom-height: 430px;"><img src="images/harley2b.jpg"/></a>
  51.                 </td>
  52.             </tr>
  53.         </table>
  54.        
  55.     </body>
  56. </html>