Magic Thumb™

Examples

Effects

Buy now  £25 Get support

Five different effects:

Linear effect - the default effect - expands at a consistent speed. Cubic effect - starts fast, then slows down. Back effect - shrinks, then enlarges too much, then shrinks to correct size. Elastic effect - enlarges too much, then shrinks to correct size. Bounce effect - enlarges then contacts twice.

Two second duration:

Linear effect - the default effect - expands at a consistent speed. Cubic effect - starts fast, then slows down. Back effect - shrinks, then enlarges too much, then shrinks to correct size. Elastic effect - enlarges too much, then shrinks to correct size. Bounce effect - enlarges then contacts twice.

Slow enlarge, fast contract:

Linear effect - the default effect - expands at a consistent speed.

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Effects</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>Five different effects:</h4>
  14.         <p>
  15.             <!-- define Magic Thumb with the default linear effect -->
  16.             <a href="images/imac-backtoback-600.jpg" class="MagicThumb" rel="group: default-speed; slideshow-effect: expand;"><img src="images/imac-backtoback-50.jpg" alt=""/><span><strong>Linear effect</strong> - the default effect - expands at a consistent speed.</span></a>
  17.             <!-- define Magic Thumb with the cubic effect -->
  18.             <a href="images/imac-backtoback-600.jpg" class="MagicThumb" rel="group: default-speed; slideshow-effect: expand; expand-effect: cubic"><img src="images/imac-backtoback-50.jpg" alt=""/><span><strong>Cubic effect</strong> - starts fast, then slows down.</span></a>
  19.             <!-- define Magic Thumb with the back effect -->
  20.             <a href="images/imac-backtoback-600.jpg" class="MagicThumb" rel="group: default-speed; slideshow-effect: expand; expand-effect: back"><img src="images/imac-backtoback-50.jpg" alt=""/><span><strong>Back effect</strong> - shrinks, then enlarges too much, then shrinks to correct size.</span></a>
  21.             <!-- define Magic Thumb with the elastic effect -->
  22.             <a href="images/imac-backtoback-600.jpg" class="MagicThumb" rel="group: default-speed; slideshow-effect: expand; expand-effect: elastic"><img src="images/imac-backtoback-50.jpg" alt=""/><span><strong>Elastic effect</strong> - enlarges too much, then shrinks to correct size.</span></a>
  23.             <!-- define Magic Thumb with the bounce effect -->
  24.             <a href="images/imac-backtoback-600.jpg" class="MagicThumb" rel="group: default-speed; slideshow-effect: expand; expand-effect: bounce"><img src="images/imac-backtoback-50.jpg" alt=""/><span><strong>Bounce effect</strong> - enlarges then contacts twice.</span></a>
  25.         </p>
  26.        
  27.         <h4>Two second duration:</h4>
  28.         <p>
  29.             <!-- define Magic Thumb with the default linear effect with 2 seconds duration-->
  30.             <a href="images/imac-backtoback-600.jpg" class="MagicThumb" rel="group: custom-speed; slideshow-effect: expand; expand-speed: 2000"><img src="images/imac-backtoback-50.jpg" alt=""/><span><strong>Linear effect</strong> - the default effect - expands at a consistent speed.</span></a>
  31.             <!-- define Magic Thumb with the cubic effect with 2 seconds duration -->  
  32.             <a href="images/imac-backtoback-600.jpg" class="MagicThumb" rel="group: custom-speed; slideshow-effect: expand; expand-effect: cubic; expand-speed: 2000"><img src="images/imac-backtoback-50.jpg" alt=""/><span><strong>Cubic effect</strong> - starts fast, then slows down.</span></a>
  33.             <!-- define Magic Thumb with the back effect  with 2 seconds duration -->  
  34.             <a href="images/imac-backtoback-600.jpg" class="MagicThumb" rel="group: custom-speed; slideshow-effect: expand; expand-effect: back; expand-speed: 2000"><img src="images/imac-backtoback-50.jpg" alt=""/><span><strong>Back effect</strong> - shrinks, then enlarges too much, then shrinks to correct size.</span></a>
  35.             <!-- define Magic Thumb with the elastic effect  with 2 seconds duration -->
  36.             <a href="images/imac-backtoback-600.jpg" class="MagicThumb" rel="group: custom-speed; slideshow-effect: expand; expand-effect: elastic; expand-speed: 2000"><img src="images/imac-backtoback-50.jpg" alt=""/><span><strong>Elastic effect</strong> - enlarges too much, then shrinks to correct size.</span></a>
  37.             <!-- define Magic Thumb with the bounce effect  with 2 seconds duration -->
  38.             <a href="images/imac-backtoback-600.jpg" class="MagicThumb" rel="group: custom-speed; slideshow-effect: expand; expand-effect: bounce; expand-speed: 2000"><img src="images/imac-backtoback-50.jpg" alt=""/><span><strong>Bounce effect</strong> - enlarges then contacts twice.</span></a>
  39.         </p>
  40.        
  41.         <h4>Slow enlarge, fast contract:</h4>
  42.         <p>
  43.             <!-- define Magic Thumb which expands over 2.5 seconds and contracts in 0.25 second -->
  44.             <a href="images/imac-backtoback-600.jpg" class="MagicThumb" rel="expand-speed: 2500; restore-speed: 250"><img src="images/imac-backtoback-50.jpg" alt=""/><span><strong>Linear effect</strong> - the default effect - expands at a consistent speed.</span></a>
  45.         </p>
  46.        
  47.     </body>
  48. </html>