Custom image

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).

Use any image you like as the magnifier!

Custom image above magnifier.
Download lense image
Custom PNG image with transparency under magnifier.
Download lense image
 
  1. <html>
  2.     <head>
  3.         <title>Magic Magnify Plus: Custom image</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/example6.html">view this example online</a>).</p>
  14.         <p>Use any image you like as the magnifier!</p>
  15.         <div class="w50">
  16.             Custom image above magnifier.
  17.             <a href="images/shoe_large.jpg" class="MagicMagnifyPlus" rel="hide-cursor:true; magnifier-size:128px; lense-position:bottom; magnifier-border-width:0; magnifier-filter:false; lense-url:images/lense.png;lense-offset-x:-19px;lense-offset-y:-19px;"><img src="images/shoe_small.jpg"/></a><br/>
  18.             <a href="images/lense.png">Download lense image</a>
  19.         </div>
  20.         <div class="w50">
  21.             Custom PNG image with transparency under magnifier.
  22.             <a href="images/shoe_large.jpg" class="MagicMagnifyPlus" rel="hide-cursor:true; magnifier-size:132px; magnifier-border-width:0; lense-url:images/lense2.png;lense-offset-x:-8px;lense-offset-y:-6px;"><img src="images/shoe_small.jpg"/></a><br/>
  23.             <a href="images/lense2.png">Download lense image</a>
  24.         </div>
  25.         <div class="clear">&nbsp;</div>
  26.        
  27.        
  28.     </body>
  29. </html>