Magic Zoom™

Examples

Global options

Customise your zoom via the <script> tag 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="magiczoom.css" rel="stylesheet" type="text/css" media="screen"/>
  7.             <!-- link to magiczoom.js file -->
  8.             <script src="magiczoom.js" type="text/javascript"></script>
  9.             <script type="text/javascript">
  10.                 MagicZoom.options = {
  11.                     'opacity': 30,
  12.                     'drag-mode': true,
  13.                     'show-title': 'bottom'
  14.                 };
  15.             </script>
  16.            
  17.     </head>
  18.     <body>
  19.        
  20.             <p>Customise your zoom via the &lt;script&gt; tag instead of the rel attribute.</p>
  21.  
  22.             <!-- define Magic Zoom -->
  23.             <a href="images/r1-blue-3.jpg" class="MagicZoom" title="Blue Yamaha YZF-R1"><img src="images/r1-blue-2.jpg"/></a> <br/>
  24.        
  25.     </body>
  26. </html>