Borders

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

Thick outside border, no magnifier border.

Bright green outside border, red magnifier border.

 

No outside border, no magnifier border.

Thin red outside border, thin green magnifier border.

 
  1. <html>
  2.     <head>
  3.         <title>Magic Magnify Plus: Borders</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/example2.html">view this example online</a>).</p>
  14.        
  15.         <div class="w50">
  16.             <p>Thick outside border, no magnifier border.</p>
  17.             <!-- define Magic Magnify Plus -->
  18.             <a href="images/shoe_large.jpg" rel="magnifier-border-width:0;border-width:5px;" class="MagicMagnifyPlus"><img src="images/shoe_small.jpg"/></a>
  19.         </div>
  20.         <div class="w50">
  21.             <p>Bright green outside border, red magnifier border.</p>
  22.             <!-- define Magic Magnify Plus -->
  23.             <a href="images/shoe_large.jpg" rel="magnifier-border-width:2px;border-width:2px;magnifier-border-color:#FF0000;border-color:#99CC33;" class="MagicMagnifyPlus"><img src="images/shoe_small.jpg"/></a>
  24.         </div>
  25.         <div class="clear">&nbsp;</div>
  26.         <div class="w50">
  27.             <p>No outside border, no magnifier border.</p>
  28.             <!-- define Magic Magnify Plus -->
  29.             <a href="images/shoe_large.jpg" rel="magnifier-border-width:0;border-width:0;" class="MagicMagnifyPlus"><img src="images/shoe_small.jpg"/></a>
  30.         </div>
  31.         <div class="w50">
  32.             <p>Thin red outside border, thin green magnifier border.</p>
  33.             <!-- define Magic Magnify Plus -->
  34.             <a href="images/shoe_large.jpg" rel="magnifier-border-width:1px;magnifier-border-color:#99CC33;border-width:1px;border-color:#FF0000;" class="MagicMagnifyPlus"><img src="images/shoe_small.jpg"/></a>
  35.         </div>
  36.         <div class="clear">&nbsp;</div>
  37.        
  38.        
  39.     </body>
  40. </html>