Magic Zoom Plus™

Examples

Hint options

Buy now Get support

Text & Icon hint (default)

Icon hint in the top right corner

Text only hint with reduced opacity

No hint

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic Zoom Plus: Hint options</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.             <style type="text/css">
  11.                 .MagicZoomPlusTextHint .MagicZoomPlusHint {
  12.                     background-image: none;
  13.                 }
  14.                 .MagicZoomPlusIconHint .MagicZoomPlusHint {
  15.                     background-position: right 50%;
  16.                     padding: 2px 20px 2px 2px !important;
  17.                 }
  18.             </style>
  19.        
  20.     </head>
  21.     <body>
  22.        
  23.         <table width="100%">
  24.             <tr>
  25.                 <td>
  26.                     <p>Text & Icon hint (default)</p>
  27.                    <a href="images/harley1c.jpg" class="MagicZoomPlus" rel="zoom-fade: true;"><img src="images/harley1b.jpg"/></a>
  28.                 </td>
  29.                 <td>
  30.                     <p>Icon hint in the top right corner</p>
  31.                     <a href="images/harley2c.jpg" class="MagicZoomPlus MagicZoomPlusIconHint" rel="zoom-position: bottom; zoom-height: 170px; hint-text:; hint-position: tr;"><img src="images/harley2b.jpg"/></a>
  32.                 </td>
  33.             </tr>
  34.             <tr>
  35.                 <td>
  36.                     <p>Text only hint with reduced opacity</p>
  37.                     <a href="images/harley2c.jpg" class="MagicZoomPlus MagicZoomPlusTextHint" rel="zoom-position: top; zoom-height: 170px; hint-text: Hover to zoom; hint-position: bc; hint-opacity: 40;"><img src="images/harley2b.jpg"/></a>
  38.                 </td>
  39.                 <td>
  40.                     <p>No hint</p>
  41.                     <a href="images/harley1c.jpg" class="MagicZoomPlus" rel="zoom-position: left; zoom-height: 170px; hint: false;"><img src="images/harley1b.jpg"/></a>
  42.                 </td>
  43.             </tr>
  44.         </table>
  45.        
  46.     </body>
  47. </html>