title: How to customize shadowbox.js rev caption?
body: <p>I have implemented a caption solution for shadowbox which uses the 'rev' inline tag.</p>
  
  <p>In shadowbox.js add... </p>
  
  <pre><code>...get("sb-caption").innerHTML=obj.link.rev||"";... 
  ...&lt;div id="sb-caption"&gt;&lt;/div&gt;...
  </code></pre>
  
  <p>In shadowbox.css add the following to the bottom of the file... </p>
  
  <pre><code>#sb-info,#sb-info-inner{height:56px;line-height:20px;} 
  #sb-caption {clear:both;font-size:90%;height:auto;line-height:12px;color:#fff;} 
  </code></pre>
  
  <p>In your page markup add the rev attribute (yes, it's a valid attribute like rel!) to the link...the caption text goes into the rev attribute... </p>
  
  <pre><code>&lt;a href="myimage.jpg" rel="shadowbox" title="My Image" rev="Your caption goes here..."&gt;My Image&lt;/a&gt; 
  </code></pre>
  
  <p>That's it...enjoy! </p>
  
  <p>Explained more here: <a href="http://shadowbox.1309102.n2.nabble.com/Captions-td2643307.html" rel="nofollow">http://shadowbox.1309102.n2.nabble.com/Captions-td2643307.html</a></p>
  
  <p>This was a very easy thing to implement.</p>
  
  <p>However, I created my own CSS...</p>
  
  <pre><code>#sb-caption{text-align:right;line-height:22px;color:#333;position:absolute;bottom:35px;right:35px;background:rgba(255,255,255,0.3);text-shadow: 1px 1px 1px #fff;display:block; padding:10px 20px 10px 50px;z-index:10;}
  </code></pre>
  
  <p><strong>This all worked wonderfully as well, however, I have spotted a problem.</strong></p>
  
  <p>When an image does NOT have a rev, the #sb-caption div appears anyway, as a semi-transparent white block, 20x70 pixels in size (the same as the padding)
  I understand that my padding set-up is the cause of the problem.</p>
  
  <p>I'm wondering if anyone can help me with a work-around.
  Something that tells shadowbox to NOT DISPLAY #sb-caption, if the rev="" is NOT SPECIFIED.</p>
  
  <p><strong>Can anyone come up with a fix for this.</strong></p>
  
  <p>Something along these lines maybe??</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    Shadowbox.init({
    });
    var Shadowbox = window.parent.Shadowbox;
    if (getElementById('sb-caption').innerHTML == '')
    getElementById('sb-caption').style.display = 'none';
  &lt;/script&gt;
  </code></pre>
  
  <p>...But, that doesn't work.</p>