Magic Thumb™

Examples

Buttons

Buy now  £25 Get support

Choose the design, size, position and number of buttons.

  1. Select the size of buttons

  2. Choose the design

  3. Enlarge images

    Buttons automatically placed in the top left or top right (depending on Windows/Mac/Linux). Buttons in the bottom left corner. Buttons in the top right, with the forward and back buttons hidden. Buttons in the top left corner. These buttons hide when you move cursor outside the image.

Here's the code:

  1. <!-- define Magic Thumbs -->
  2. <p>
  3.     <a href="images/imac-backtoback-600.jpg" class="MagicThumb"><img src="images/imac-backtoback-50.jpg" alt=""/><span>Buttons automatically placed in the top left or top right (depending on Windows/Mac/Linux).</span></a>
  4.     <a href="images/imac-backtoback-600.jpg" class="MagicThumb" id="buttons3" rel="buttons-position: bottom left"><img src="images/imac-backtoback-50.jpg" alt=""/><span>Buttons in the bottom left corner.</span></a>
  5.     <a href="images/imac-backtoback-600.jpg" class="MagicThumb" id="buttons5" rel="buttons-position: top right; buttons-display:close"><img src="images/imac-backtoback-50.jpg" alt=""/><span>Buttons in the top right, with the forward and back buttons hidden.</span></a>
  6.     <a href="images/imac-backtoback-600.jpg" class="MagicThumb" id="buttons7" rel="buttons: autohide; buttons-position:top left"><img src="images/imac-backtoback-50.jpg" alt=""/><span>Buttons in the top left corner. These buttons hide when you move cursor outside the image.</span></a>
  7. </p>