Magic Zoom Plus™

Examples

Window dimensions

Buy now Get support

Zoomed image

A wide zoom window of 400x200 pixels.

A zoom window of 500x500 pixels.

Zoom window of 100% of the original (small) image.

Expanded image

An expanded image fits screen size (default).

An expanded image of 700 pixels wide.

An expanded image of 300 pixels height.

An expanded image of original size.

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic Zoom Plus: Window dimensions</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.         <h3><a name="zoom">Zoomed image</a></h3>
  14.         <table class="stretched">
  15.             <tr>
  16.                 <td>
  17.                     <p>A wide zoom window of 400x200 pixels.</p>
  18.                     <a href="images/harley2c.jpg" rel="zoom-width: 400;zoom-height: 200;" class="MagicZoomPlus"><img src="images/harley2b.jpg"/></a>
  19.                 </td>
  20.                 <td>
  21.                     <p>A zoom window of 500x500 pixels.</p>
  22.                     <a href="images/harley2c.jpg" rel="zoom-width: 500;zoom-height: 500;zoom-position: left;" class="MagicZoomPlus"><img src="images/harley2b.jpg"/></a>
  23.                 </td>
  24.             </tr>
  25.             <tr>
  26.                 <td colspan="2">
  27.                     <p>Zoom window of 100% of the original (small) image.</p>
  28.                     <a href="images/harley2c.jpg" rel="zoom-width: 100%;zoom-height: 100%;" class="MagicZoomPlus"><img src="images/harley2b.jpg"/></a>
  29.                 </td>
  30.             </tr>
  31.         </table>
  32.         <h3><a name="expand">Expanded image</a></h3>
  33.         <table class="stretched">
  34.             <tr>
  35.                 <td>
  36.                     <p>An expanded image fits screen size (default).</p>
  37.                     <a href="images/harley1c-large.jpg" class="MagicZoomPlus"><img src="images/harley1b.jpg"/></a> <br/>
  38.                 </td>
  39.                 <td>
  40.                     <p>An expanded image of 700 pixels wide.</p>
  41.                     <a href="images/harley1c-large.jpg" class="MagicZoomPlus" rel="expand-size: width=700px;" ><img src="images/harley1b.jpg"/></a> <br/>
  42.                 </td>
  43.             </tr>
  44.             <tr>
  45.                 <td>
  46.                     <p>An expanded image of 300 pixels height.</p>
  47.                     <a href="images/harley1c-large.jpg" class="MagicZoomPlus" rel="expand-size: height=300px;" ><img src="images/harley1b.jpg"/></a> <br/>
  48.                 </td>
  49.                 <td>
  50.                     <p>An expanded image of original size.</p>
  51.                     <a href="images/harley1c-large.jpg" class="MagicZoomPlus" rel="expand-size: original;" ><img src="images/harley1b.jpg"/></a> <br/>
  52.                 </td>
  53.             </tr>
  54.         </table>
  55.        
  56.     </body>
  57. </html>