Magic Zoom Plus™

Examples

Global options

Buy now Get support

Customise your zoom via the SCRIPT instead of the rel attribute.

Here's the code:

  1. <html>
  2.     <head>
  3.             <title>Magic Zoom: Global options</title>
  4.            
  5.             <!-- link to magiczoom.css file -->
  6.             <link href="magiczoomplus/magiczoomplus.css" rel="stylesheet" type="text/css" media="screen"/>
  7.             <!-- link to magiczoom.js file -->
  8.             <script src="magiczoomplus/magiczoomplus.js" type="text/javascript"></script>
  9.             <script type="text/javascript">
  10.                 MagicZoomPlus.options = {
  11.                     'opacity': 30,
  12.                     'background-opacity': 70,
  13.                     'show-title': 'bottom'
  14.                 };
  15.             </script>
  16.            
  17.     </head>
  18.     <body>
  19.        
  20.             <p>Customise your zoom via the SCRIPT instead of the rel attribute.</p>
  21.  
  22.             <a href="images/harley1c.jpg" title="Low opacity on hover, dark background on click" class="MagicZoomPlus"><img src="images/harley1b.jpg"/></a>
  23.  
  24.        
  25.     </body>
  26. </html>