5

I have implemented a caption solution for shadowbox which uses the 'rev' inline tag.

In shadowbox.js add... 

...get("sb-caption").innerHTML=obj.link.rev||"";... 
...<div id="sb-caption"></div>...

In shadowbox.css add the following to the bottom of the file... 

#sb-info,#sb-info-inner{height:56px;line-height:20px;} 
#sb-caption {clear:both;font-size:90%;height:auto;line-height:12px;color:#fff;}

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... 

<a href="myimage.jpg" rel="shadowbox" title="My Image" rev="Your caption goes here...">My Image</a>

That's it...enjoy!

Explained more here: http://shadowbox.1309102.n2.nabble.com/Captions-td2643307.html

This was a very easy thing to implement.

However, I created my own CSS...

#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;}

This all worked wonderfully as well, however, I have spotted a problem.

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.

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.

Can anyone come up with a fix for this.

Something along these lines maybe??

<script type="text/javascript">
  Shadowbox.init({
  });
  var Shadowbox = window.parent.Shadowbox;
  if (getElementById('sb-caption').innerHTML == '')
  getElementById('sb-caption').style.display = 'none';
</script>

...But, that doesn't work.

Wahyu Kristianto
  • 8,719
  • 6
  • 43
  • 68
vitaly87
  • 306
  • 3
  • 15

1 Answers1

1

you were close, but you can handle this directly in the shadowbox.js (if you're changing it anyway). Insert this

ad("sb-caption").style.display = (ad("sb-caption").innerHTML == "") ? 'none' : 'block' ;

right after 

ad("sb-caption").innerHTML=aJ.link.rev||"";

and you're done. I think it's obvious what it does: Everytime you open a Shadowbox, you check for content within the id="sb-caption" element. If there is no content set its display to none, otherwise to block.

muetzenflo
  • 5,653
  • 4
  • 41
  • 82