Magic Thumb™

Examples

Image size

Buy now  £25 Get support

Let the large image scale to fit inside the users screen,

Images will be scaled downwards to fit inside the users browser window without needing to scroll. This is the default.

or use the original size.

This is the original size of the image. It is not scaled, so users might have to scroll to see all the image.

Here's the code:

  1. <html>
  2.     <head>
  3.         <title> Image size</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>Let the large image scale to fit inside the users screen,</p>
  14.        
  15.         <p>
  16.             <!-- define Magic Thumb which scales the image downwards to fit inside the users browser window (by default) -->
  17.             <a href="images/imac-side-768.jpg" class="MagicThumb" rel="image-size: fit-screen"><img src="images/imac-side-90.jpg" alt=""/><span>Images will be scaled downwards to fit inside the users browser window without needing to scroll. This is the default.</span></a>
  18.         </p>
  19.         <p>or use the original size.</p>
  20.         <p>
  21.             <!-- define Magic Thumb which doesn't scale the image -->
  22.             <a href="images/imac-side-768.jpg" class="MagicThumb" rel="image-size: original"><img src="images/imac-side-90.jpg" alt=""/><span>This is the original size of the image. It is not scaled, so users might have to scroll to see all the image.</span></a>
  23.         </p>
  24.        
  25.     </body>
  26. </html>