Magic Thumb™

Examples

Magic Thumb™ API

Buy now  £25 Get support

The API allows more advanced customisation of Magic Thumb™. Here are some examples of what you can do. Email us if you have questions.

    

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic Thumb&trade; API</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>The API allows more advanced customisation of Magic Thumb&trade;. Here are some examples of what you can do. <a href="mailto:support@magictoolbox.com">Email us</a> if you have questions.</p>
  14.         <p>
  15.             <a id="thumb-1" class="MagicThumb" href="images/imac-side-300.jpg" title="" rel="caption-source: a:title; caption-speed: 300"><img src="images/imac-side-90.jpg" alt=""/></a>
  16.             &nbsp;&nbsp;&nbsp;&nbsp;
  17.             <a id="thumb-2" class="MagicThumb" href="images/imac-side-300.jpg" title="" rel="caption-source: a:title; caption-speed: 300"><img src="images/imac-side-50.jpg" alt=""/></a>
  18.         </p>
  19.         <p>
  20.             <!-- Stop all Magic Thumb objects on the page -->
  21.             <input type="button" value="Stop all" onclick="MagicThumb.stop();"/>
  22.  
  23.             <!-- Start all Magic Thumb objects on the page after we stopped them -->
  24.             <input type="button" value="Start all" onclick="MagicThumb.start();"/>
  25.  
  26.             <!-- Reload all Magic Thumb objects on the page -->
  27.             <script type="text/javascript">
  28.                 function reloadAll() {
  29.                     // Let's update some global options and reload Magic Thumbs
  30.                     MagicThumb.options = {
  31.                             'expand-effect': 'back'
  32.                         }
  33.                     MagicThumb.refresh();
  34.                 }
  35.             </script>
  36.             <input type="button" value="Refresh all" onclick="reloadAll();"/>
  37.         </p>
  38.         <p>
  39.             <!-- Stop a particular Magic Thumb by ID -->
  40.             <input type="button" value="Stop second thumb" onclick="MagicThumb.stop('thumb-2');"/>
  41.  
  42.             <!-- Stop a particular Magic Thumb by ID -->
  43.             <input type="button" value="Start second thumb" onclick="MagicThumb.start('thumb-2');"/>
  44.  
  45.             <!-- Reload a particular Magic Thumb by ID -->
  46.             <script type="text/javascript">
  47.                 function reloadSecond() {
  48.                     // Let's update options of particular Magic Thumb and reload it
  49.                     document.getElementById('thumb-2').rel='expand-effect: bounce';
  50.                     MagicThumb.refresh('thumb-2');
  51.                 }
  52.             </script>
  53.             <input type="button" value="Refresh second thumb" onclick="reloadSecond();"/>
  54.         </p>
  55.         <p>
  56.             <!-- Expand a particular Magic Thumb by ID -->
  57.             <input type="button" value="Expand first thumb" onclick="MagicThumb.expand('thumb-1');"/>
  58.             <!-- Restore a particular Magic Thumb by ID -->
  59.             <input type="button" value="Restore first thumb" onclick="MagicThumb.restore('thumb-1');"/>
  60.         </p>
  61.        
  62.     </body>
  63. </html>