Magic Thumb™

Examples

Slideshow

Buy now  £25 Get support

Move between images in a slideshow style. Use the arrow buttons or the keyboard.

Dissolve effect

This image has a white background with <strong>100% opacity

Cross-fade effect, no repeat

This image has a white background with <strong>100% opacity

Expand effect

This image has a white background with <strong>100% opacity

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Slideshow</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>Move between images in a slideshow style. Use the arrow buttons or the keyboard.</p>
  14.        
  15.         <h4>Dissolve effect</h4>  
  16.         <p>
  17.             <!-- define Magic Thumbs  -->
  18.             <a href="images/imac-family-600.jpg" class="MagicThumb" rel="group: dissolve-effect; slideshow-effect: dissolve;"><img src="images/imac-family-90.jpg" alt="" /></a>
  19.             <a href="images/imac-backtoback-600.jpg" class="MagicThumb" rel="group: dissolve-effect; slideshow-effect: dissolve;"><img src="images/imac-backtoback-90.jpg" alt="This image has a white background with <strong>100% opacity"/></a>
  20.             <a href="images/imac-side-600.jpg" class="MagicThumb" rel="group: dissolve-effect; slideshow-effect: dissolve;"><img src="images/imac-side-90.jpg" alt=""/></a>
  21.          </p>
  22.  
  23.         <h4>Cross-fade effect, no repeat</h4>  
  24.         <p>
  25.             <!-- define main Magic Thumbs -->
  26.             <a href="images/imac-family-600.jpg" class="MagicThumb" rel="group: fade-effect; slideshow-effect: fade; slideshow-loop: false;"><img src="images/imac-family-90.jpg" alt="" /></a>
  27.             <a href="images/imac-backtoback-600.jpg" class="MagicThumb" rel="group: fade-effect; slideshow-effect: fade; slideshow-loop: false;"><img src="images/imac-backtoback-90.jpg" alt="This image has a white background with <strong>100% opacity"/></a>
  28.             <a href="images/imac-side-600.jpg" class="MagicThumb" rel="group: fade-effect; slideshow-effect: fade; slideshow-loop: false;"><img src="images/imac-side-90.jpg" alt=""/></a>
  29.          </p>
  30.  
  31.         <h4>Expand effect</h4>  
  32.         <p>
  33.             <!-- define main Magic Thumbs -->
  34.             <a href="images/imac-family-600.jpg" class="MagicThumb" rel="group: expand; slideshow-effect: expand;"><img src="images/imac-family-90.jpg" alt="" /></a>
  35.             <a href="images/imac-backtoback-600.jpg" class="MagicThumb" rel="group: expand; slideshow-effect: expand;"><img src="images/imac-backtoback-90.jpg" alt="This image has a white background with <strong>100% opacity"/></a>
  36.             <a href="images/imac-side-600.jpg" class="MagicThumb" rel="group: expand; slideshow-effect: expand;"><img src="images/imac-side-90.jpg" alt=""/></a>
  37.          </p>
  38.        
  39.     </body>
  40. </html>