Magnifier filter

Buy now  £39 Get support

NOTE: The click to enlarge feature only works when this page is served from localhost or a webserver (view this example online).

Glow filter (the default).

Shadow filter.

 

No filter.

 
  1. <html>
  2.     <head>
  3.         <title>Magic Magnify Plus Plus: Magnifier filter</title>
  4.        
  5.         <!-- link to magicmagnifyplus.css file -->
  6.         <link rel="stylesheet" href="magicmagnifyplus/magicmagnifyplus.css" type="text/css" media="screen, projection"/>
  7.         <!-- link to magicmagnifyplus/magicmagnifyplus.js file -->
  8.         <script src="magicmagnifyplus/magicmagnifyplus.js" type="text/javascript"></script>
  9.        
  10.     </head>
  11.     <body>
  12.        
  13.         <p class="note">NOTE: The click to enlarge feature only works when this page is served from localhost or a webserver (<a href="http://demo.magictoolbox.com/magicmagnifyplus/example5.html">view this example online</a>).</p>
  14.         <div class="w50">
  15.             <p>Glow filter (the default).</p>
  16.             <a href="images/shoe_large.jpg" class="MagicMagnifyPlus" rel="magnifier-filter:glow;"><img src="images/shoe_small.jpg"/></a>
  17.         </div>
  18.         <div class="w50">
  19.             <p>Shadow filter.</p>
  20.             <a href="images/shoe_large.jpg" class="MagicMagnifyPlus" rel="magnifier-filter:shadow;"><img src="images/shoe_small.jpg"/></a>
  21.         </div>
  22.         <div class="clear">&nbsp;</div>
  23.         <div class="w50">
  24.             <p>No filter.</p>
  25.             <a href="images/shoe_large.jpg" class="MagicMagnifyPlus" rel="magnifier-filter:false;"><img src="images/shoe_small.jpg"/></a>
  26.         </div>
  27.         <div class="clear">&nbsp;</div>
  28.        
  29.        
  30.     </body>
  31. </html>