Magic Thumb™

Examples

Multiple images

Buy now  £25 Get support

Enlarge into many different images. Each image can have its own settings.

Click on selector to switch between images

This image has a white background with 70% opacity. You can also add [a href="http://www.magictoolbox.com/magicthumb/"]links[/a].

Move mouse over selectors to switch between images

This image has a white background with 70% opacity. You can also add [a href="http://www.magictoolbox.com/magicthumb/"]links[/a].

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Multiple images</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>Enlarge into many different images. Each image can have its own settings.</p>
  14.        
  15.         <h4>Click on selector to switch between images</h4>  
  16.         <p>
  17.             <!-- define main Magic Thumb -->
  18.             <a href="images/imac-family-600.jpg" class="MagicThumb" id="magicthumb-1" rel="background-opacity: 70; background-color: #fff"><img alt="" src="images/imac-family-90.jpg"/><span>This image has a white background with <strong>70% opacity</strong>. You can also add [a href="http://www.magictoolbox.com/magicthumb/"]links[/a].</span></a>
  19.          </p>
  20.          <p>
  21.              <!-- selector for the main image -->
  22.              <a href="images/imac-family-600.jpg" rev="images/imac-family-90.jpg" rel="thumb-id: magicthumb-1;"><img src="images/imac-family-50.jpg" alt=""/></a>
  23.              <!-- selector has a white backgound with 100% opacity and own caption from <A> title -->
  24.              <a href="images/imac-backtoback-600.jpg" title="This image has a white background with <strong>100% opacity</strong>" rev="images/imac-backtoback-90.jpg" rel="thumb-id: magicthumb-1; caption-source: a:title; background-opacity:100; background-color:#fff; caption-speed: 0"><img src="images/imac-backtoback-50.jpg" alt=""/></a>
  25.              <!-- selector has a black backgound with 70% opacity and own caption from the <A> title -->
  26.              <a href="images/imac-side-600.jpg" title="This image has a black background with <strong>70% opacity</strong>" rev="images/imac-side-90.jpg" rel="thumb-id: magicthumb-1; caption-source: a:title; background-opacity:70; background-color:#000; caption-speed: 300"><img src="images/imac-side-50.jpg" alt=""/></a>
  27.          </p>
  28.  
  29.         <h4>Move mouse over selectors to switch between images</h4>  
  30.         <p>
  31.             <!-- define Magic Thumb -->
  32.             <a href="images/imac-family-600.jpg" class="MagicThumb" id="magicthumb-2" rel="swap-image: mouseover; background-opacity: 70; background-color: #fff"><img alt="" src="images/imac-family-90.jpg"/><span>This image has a white background with <strong>70% opacity</strong>. You can also add [a href="http://www.magictoolbox.com/magicthumb/"]links[/a].</span></a>
  33.          </p>
  34.          <p>
  35.              <!-- selector for the main image -->
  36.              <a href="images/imac-family-600.jpg" rev="images/imac-family-90.jpg" rel="thumb-id: magicthumb-2;"><img src="images/imac-family-50.jpg" alt=""/></a>
  37.              <!-- selector has a white backgound with 100% opacity and own caption from <A> title -->
  38.              <a href="images/imac-backtoback-600.jpg" title="This image has a white background with <strong>100% opacity</strong>" rev="images/imac-backtoback-90.jpg" rel="thumb-id: magicthumb-2; caption-source: a:title; background-opacity:100; background-color:#fff; caption-speed: 0"><img src="images/imac-backtoback-50.jpg" alt=""/></a>
  39.              <!-- selector has a black backgound with 70% opacity and own caption from the <A> title -->
  40.              <a href="images/imac-side-600.jpg" title="This image has a black background with <strong>70% opacity</strong>" rev="images/imac-side-90.jpg" rel="thumb-id: magicthumb-2; caption-source: a:title; background-opacity:70; background-color:#000; caption-speed: 300"><img src="images/imac-side-50.jpg" alt=""/></a>
  41.          </p>
  42.        
  43.     </body>
  44. </html>