Magic Thumb™

Examples

Position

Buy now  £25 Get support

Place the enlarged image wherever you like.

Relative to the screen

Relative to the small image

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Position</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.         <p>Place the enlarged image wherever you like.</p>
  14.         <h4>Relative to the screen</h4>
  15.         <p>
  16.             <!-- define Magic Thumb enlarges to the top left of the screen -->
  17.             <a href="images/imac-side-300.jpg" class="MagicThumb" rel="group: screen; slideshow-effect: expand; expand-position: top:0, left:0" title="Enlarges to top left"><img src="images/imac-side-50.jpg" alt=""/></a>
  18.             <!-- define Magic Thumb enlarges to the top right of the screen -->
  19.             <a href="images/imac-side-300.jpg" class="MagicThumb" rel="group: screen; slideshow-effect: expand; expand-position: top:0, right:0; caption-source: a:title" title="Enlarges to top right"><img src="images/imac-side-50.jpg" alt=""/></a>
  20.             <!-- define Magic Thumb enlarges to the bottom left of the screen -->
  21.             <a href="images/imac-side-300.jpg" class="MagicThumb" rel="group: screen; slideshow-effect: expand; expand-position: bottom:0, left:0; caption-source: a:title" title="Enlarges to bottom left"><img src="images/imac-side-50.jpg" alt=""/></a>
  22.             <!-- define Magic Thumb enlarges to the bottom right of the screen with 50px bottom padding and 100px right padding -->
  23.             <a href="images/imac-side-300.jpg" class="MagicThumb" rel="group: screen; slideshow-effect: expand; expand-position: bottom:50, right:100; caption-source: a:title" title="Enlarges to bottom right, with 50px bottom padding and 100px right padding."><img src="images/imac-side-50.jpg" alt=""/></a>
  24.         </p>
  25.        
  26.         <h4>Relative to the small image</h4>
  27.         <p>
  28.             <!-- define Magic Thumb enlarges to the top left of the small image -->
  29.             <a href="images/imac-side-300.jpg" class="MagicThumb" rel="group: image; slideshow-effect: expand; expand-position: top:0, left:0; expand-align:image; caption-source:a:title" title="Enlarges to top left of the small image"><img src="images/imac-side-50.jpg" alt=""/></a>
  30.             <!-- define Magic Thumb enlarges to the top right of the small image -->
  31.             <a href="images/imac-side-300.jpg" class="MagicThumb" rel="group: image; slideshow-effect: expand; expand-position: top:0, right:0; expand-align:image; caption-source:a:title" title="Enlarges to top right of the small image"><img src="images/imac-side-50.jpg" alt=""/></a>
  32.             <!-- define Magic Thumb enlarges to the bottom left of the small image -->
  33.             <a href="images/imac-side-300.jpg" class="MagicThumb" rel="group: image; slideshow-effect: expand; expand-position: bottom:0, left:0; expand-align:image; caption-source:a:title" title="Enlarges to the bottom left of the small image"><img src="images/imac-side-50.jpg" alt=""/></a>
  34.             <!-- define Magic Thumb enlarges to the bottom right of the small image -->
  35.             <a href="images/imac-side-300.jpg" class="MagicThumb" rel="group: image; slideshow-effect: expand; expand-position: bottom:0, right:0; expand-align:image; caption-source:a:title" title="Enlarges to bottom right of the small image"><img src="images/imac-side-50.jpg" alt=""/></a>
  36.         </p>
  37.        
  38.     </body>
  39. </html>