Magic Thumb™

Examples

Background

Buy now  £25 Get support

Make the image stand out more by adding a background behind it.

This has a black background with 60% opacity.

This has a white background with 100% opacity.

This has a blue background with 50% opacity which fades in over 1 second (instead of 0.2 seconds).

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Background</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>Make the image stand out more by adding a background behind it.</h4>
  14.         <p>
  15.             <!-- define Magic Thumb with a black background with 60% opacity -->
  16.             <a href="images/imac-family-600.jpg" class="MagicThumb" rel="background-color:#000; background-opacity:60"><img src="images/imac-family-50.jpg" alt=""/><span>This has a black background with 60% opacity.</span></a>
  17.         </p>
  18.         <p>
  19.             <!-- define Magic Thumb with a white background with 60% opacity -->
  20.             <a href="images/imac-family-600.jpg" class="MagicThumb" rel="background-color:#fff; background-opacity:100"><img src="images/imac-family-50.jpg" alt=""/><span>This has a white background with 100% opacity.</span></a>
  21.         </p>
  22.         <p>
  23.             <!-- define Magic Thumb with a blue background with 50% opacity which fades in over 1 second (instead of 0.2 seconds) -->
  24.             <a href="images/imac-family-600.jpg" class="MagicThumb" rel="background-color:#686AA2; background-opacity:60; background-speed:1000"><img src="images/imac-family-50.jpg" alt=""/><span>This has a blue background with 50% opacity which fades in over 1 second (instead of 0.2 seconds).</span></a>
  25.         </p>
  26.        
  27.     </body>
  28. </html>