Magic Thumb™

Examples

Settings wizard

Buy now  £25 Get support

1. Choose your settings

User experience
Expand duration, ms:
Restore duration, ms:
Effect for expanding image:
Effect for restoring image:
 
Show thumbnail when image enlarged:
 
Background color behind large image:
Opacity of the background, 0-100 (0 = disabled):
Duration of background fade, ms:
 
Source of caption text:
Speed of caption slide effect, ms:
Where to position the caption:
Max height of bottom caption, px:
Max width of left/right caption, ms:
 
Show loading box:
Text of the loading message:
Opacity of the loading box, 0-100:
Geometry
Size of the enlarged image:
Align image relative to :
Precise position of enlarged image, px:
Hint: top:0, left:0 / top:0, right:0 / bottom:100, left:100
Miscellaneous
Link enlarged image to a URL:
Open link in: window
 
Use keyboard shortcuts:
Require the Ctrl key to permit shortcuts:
Expand mode
Trigger for the enlarge effect:
Delay before mouseover triggers enlargement, ms:
Trigger to restore image to its small state:
Click to initialise:
How to switch between multiple images:
Delay before switching images, ms:
 
Visual effect for switching enlarged images:
Speed of slideshow effect, ms:
Restart slideshow after last image:
Buttons
Whether or not to show buttons:
Buttons position:
Which buttons to show:

Choose size of buttons:

Choose prefer design:

2.

Your customised thumb and HTML are below.

Caption text from the alt of the imageCaption text from <span>

Caption text from the external div

Here's the code:

  1. <p>
  2.             <!-- define main Magic Thumb -->
  3.             <a href="images/imac-family-600.jpg" id="magicthumb-1" title="Caption text from the title of the link" class="MagicThumb" rel=""><img title="Caption text from the title of the image" alt="Caption text from the alt of the image" src="images/imac-family-90.jpg"/><span>Caption text from &lt;span&gt;</span></a>
  4.          </p>
  5.          <p>
  6.              <!-- selector for the main image -->
  7.              <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>
  8.              <!-- selector has a white backgound with 100% opacity and own caption from <IMG> alt -->
  9.              <a href="images/imac-backtoback-600.jpg" rev="images/imac-backtoback-90.jpg" rel="thumb-id: magicthumb-1"><img src="images/imac-backtoback-50.jpg" alt=""/></a>
  10.              <!-- selector has a black backgound with 70% opacity and own caption from the <A> title -->
  11.              <a href="images/imac-side-600.jpg" title="" rev="images/imac-side-90.jpg" rel="thumb-id: magicthumb-1"><img src="images/imac-side-50.jpg" alt=""/></a>
  12.          </p>
  13.          <div id="custom-caption-source" class="MagicThumb-external-caption">
  14.                 Caption text from the external div
  15.          </div>