Enlargement

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

Over 30 options are available to customise the enlarged image, using Magic Thumb™.

Caption to right

Place the caption to the top, bottom, left or right.

Captions can use bold, italic and can have links.

They can even have images.

Adidas Black Adidas Blue Adidas Red

 
 
  1. <html>
  2.     <head>
  3.         <title>Magic Magnify Plus: Enlargement</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/example7.html">view this example online</a>).</p>
  14.         <p>Over 30 options are available to customise the enlarged image, using Magic Thumb&trade;.</p>    
  15.         <div class="w50">
  16.             Dark background
  17.             <a href="images/shoe_large.jpg" class="MagicMagnifyPlus" rel="background-color:#000;background-opacity:80;"><img src="images/shoe_small.jpg"/><span>Change the color and opacity of the background around the image.</span></a>
  18.         </div>
  19.         <div class="w50">
  20.             Caption to right
  21.             <a href="images/shoe_large.jpg" class="MagicMagnifyPlus" rel="caption-source:#ex-caption; caption-position:right; caption-width:240;"><img src="images/shoe_small.jpg"/></a>
  22.             <div id="ex-caption" class="MagicThumb-external-caption">
  23.                 <p>Place the caption to the top, bottom, left or right.</p>
  24.                 <p>Captions can use <b>bold</b>, <i>italic</i> and <a href="http://www.magictoolbox.com">can have links</a>.</p>
  25.                 <p>They can even have images.</p>
  26.                 <p><img alt="Adidas Black" src="images/sel.jpg"/>&nbsp;<img alt="Adidas Blue" src="images/sel1.jpg"/>&nbsp;<img alt="Adidas Red" src="images/sel2.jpg"/></p>
  27.             </div>
  28.         </div>
  29.         <div class="clear">&nbsp;</div>
  30.         <div class="w50">
  31.             Change position
  32.             <a href="images/shoe_large.jpg" class="MagicMagnifyPlus" rel="expand-position: bottom:0, left:0;"><img src="images/shoe_small.jpg"/><span>Images can be placed anywhere on the page. This one is set to the top right.</span></a>
  33.         </div>
  34.         <div class="w50">
  35.             Link to URL
  36.             <a href="images/shoe_large.jpg" class="MagicMagnifyPlus" rel="link: http://www.magictoolbox.com/magicmagnifyplus/"><img src="images/shoe_small.jpg"/><span>Click the enlarged image above - it links to another URL.</span></a>
  37.         </div>
  38.         <div class="clear">&nbsp;</div>
  39.        
  40.        
  41.     </body>
  42. </html>