Magic Zoom™

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: Hint options</title>
  4.        
  5.             <!-- link to magiczoom.css file -->
  6.             <link href="magiczoom/magiczoom.css" rel="stylesheet" type="text/css" media="screen"/>
  7.             <!-- link to magiczoom.js file -->
  8.             <script src="magiczoom/magiczoom.js" type="text/javascript"></script>
  9.            
  10.             <style type="text/css">
  11.                 .MagicZoomTextHint .MagicZoomHint {
  12.                     background-image: none;
  13.                 }
  14.                 .MagicZoomIconHint .MagicZoomHint {
  15.                     background: url(magiczoom/graphics/hint.gif) no-repeat 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/r1-red-3.jpg" class="MagicZoom" rel="zoom-fade: true;"><img src="images/r1-red-2.jpg"/></a>
  28.                 </td>
  29.                 <td>
  30.                     <p>Icon hint in the top right corner</p>
  31.                     <a href="images/r1-black-3.jpg" class="MagicZoom MagicZoomIconHint" rel="zoom-position:bottom;zoom-height:170px; hint-text:; hint-position: tr;"><img src="images/r1-black-2.jpg"/></a>
  32.                 </td>
  33.             </tr>
  34.             <tr>
  35.                 <td>
  36.                     <p>Text only hint with reduced opacity</p>
  37.                     <a href="images/r1-blue-3.jpg" class="MagicZoom MagicZoomTextHint" rel="zoom-position:top;zoom-height:170px; hint-text: Hover to zoom;  hint-position: bc;  hint-opacity: 40;"><img src="images/r1-blue-2.jpg"/></a>
  38.                 </td>
  39.                 <td>
  40.                     <p>No hint</p>
  41.                     <a href="images/r1-red-3.jpg" class="MagicZoom" rel="zoom-position:left;zoom-height:170px; hint: false;"><img src="images/r1-red-2.jpg"/></a>
  42.                 </td>
  43.             </tr>
  44.         </table>
  45.        
  46.     </body>
  47. </html>