Magic Thumb™

Examples

Link on image

Buy now  £25 Get support

The enlarged image can link to another page.

Page opens in the same window. Click middle button (mouse wheel) to open in a new window.

Same link, but opens in a new window

Note: Your browser may prevent from opening a new window if this example is opened from local disk.

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Link on image</title>
  4.        
  5.         <!-- link to magicthumb.css file -->
  6.         <link href="magicthumb/magicthumb.css" rel="stylesheet" type="text/css" media="screen"/>
  7.         <!-- link to magicthumb.js file -->
  8.         <script src="magicthumb/magicthumb.js" type="text/javascript"></script>
  9.        
  10.     </head>
  11.     <body>
  12.        
  13.         <h4>The enlarged image can link to another page.</h4>
  14.         <!-- define Magic Thumb -->
  15.         <a href="images/imac-family-600.jpg" class="MagicThumb" rel="link: http://www.magictoolbox.com/magicthumb/"><img src="images/imac-family-90.jpg" alt=""/></a>
  16.         <p>Page opens in the same window. Click middle button (mouse wheel) to open in a new window.</p>
  17.  
  18.         <h4>Same link, but opens in a new window</h4>
  19.         <!-- define Magic Thumb -->
  20.         <a href="images/imac-family-600.jpg" class="MagicThumb" rel="link: http://www.magictoolbox.com/magicthumb/; link-target: _blank"><img src="images/imac-family-90.jpg" alt=""/></a>
  21.         <p>Note: Your browser may prevent from opening a new window if this example is opened from local disk.</p>
  22.        
  23.     </body>
  24. </html>