Magic Thumb™

Examples

Caption

Buy now  £25 Get support

Place a text caption under the image, or to the left or right.

This caption is positioned under the image. This caption is to the left of the image. This caption is to the right of the image.

The caption can come from 5 sources: <span>, image alt tag, image title tag, link title tag or a div.

This caption comes from the image alt tag.

Caption

This caption is aligned to the right of the image.

The content comes from a div, so you can format it any way you like.

  1. You can place lists in captions.
  2. And other HTML formatting.
  3. And even images!

This div is hidden until the image is enlarged by the addition of the class "MagicThumb-external-caption" to the div. Without this class, the div will also show on your page.

Try for yourself! Contact us if you get stuck.

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Caption</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>Place a text caption under the image, or to the left or right.</h4>
  14.  
  15.         <p>
  16.             <!-- define Magic Thumb with a caption under the image -->
  17.             <a href="images/imac-side-300.jpg" class="MagicThumb" rel="caption-position: bottom"><img src="images/imac-side-50.jpg" alt=""/><span>This caption is positioned under the image.</span></a>
  18.             <!-- define Magic Thumb with a caption to the left of the image -->
  19.             <a href="images/imac-side-300.jpg" class="MagicThumb" rel="caption-position: left"><img src="images/imac-side-50.jpg"/><span>This caption is to the left of the image.</span></a>
  20.             <!-- define Magic Thumb with a caption to the right of the image -->
  21.             <a href="images/imac-side-300.jpg" class="MagicThumb" rel="caption-position: right"><img src="images/imac-side-50.jpg"/><span>This caption is to the right of the image.</span></a>
  22.         </p>
  23.  
  24.         <h4>The caption can come from 5 sources: &lt;span&gt;, image alt tag, image title tag, link title tag or a div.</h4>
  25.  
  26.         <p>
  27.             <!-- define Magic Thumb with a caption from the image alt tag -->
  28.             <a href="images/imac-side-300.jpg" class="MagicThumb" rel="caption-source: img:alt"><img src="images/imac-side-50.jpg" alt="This caption comes from the image alt tag."/></a>
  29.             <!-- define Magic Thumb with a caption from the image title tag -->
  30.             <a href="images/imac-side-300.jpg" class="MagicThumb" rel="caption-source: img:title"><img src="images/imac-side-50.jpg" title="This caption comes from the image title tag."/></a>
  31.             <!-- define Magic Thumb with a caption from the link title tag -->
  32.             <a href="images/imac-side-300.jpg" class="MagicThumb" rel="caption-source: a:title" title="This caption comes from the link title tag."><img src="images/imac-side-50.jpg"/></a>
  33.         </p>
  34.  
  35.         <p>
  36.             <!-- define Magic Thumb with a caption from the external div -->
  37.             <a href="images/imac-backtoback-600.jpg" class="MagicThumb" rel="caption-source:#ex-caption; caption-position:right; caption-width:240"><img src="images/imac-backtoback-50.jpg" alt=""/></a>
  38.         </p>
  39.         <div id="ex-caption" class="MagicThumb-external-caption">
  40.             <h2>Caption</h2>
  41.             <p>This caption is aligned to the right of the image.</p>
  42.             <p>The content comes from a div, so you can format it any way you like.</p>
  43.             <ol>
  44.                 <li>You can place lists in captions.</li>
  45.                 <li>And other HTML formatting.</li>
  46.                 <li>And even images!</li>
  47.             </ol>
  48.             <p><img src="images/imac-family-50.jpg" alt="" /> <img src="images/imac-backtoback-50.jpg" alt="" /> <img src="images/imac-side-50.jpg" alt="" /></p>
  49.             <p>This div is hidden until the image is enlarged by the addition of the class &quot;MagicThumb-external-caption&quot; to the div. Without this class, the div will also show on your page.</p>
  50.             <p>Try for yourself! <a href="http://www.magictoolbox.com/contact/">Contact us</a> if you get stuck.</p>
  51.         </div>     
  52.        
  53.     </body>
  54. </html>