Show title under the image in shadowbox

Solution:

go to http://www.shadowbox-js.com/forum.html this url.on the second page there is the solution named caption solution

So I know this is an old thread, but I just found a super easy solution to the caption issue that doesn't involve child nodes or whatever that stuff is... I rarely use JavaScript, or any code for that matter, I'm a designer and I prefer to try solving things myself before hiring someone.

Note #1: I never used any Shadowbox version before 3.0.3, so this solution works for 3.0.3 for sure. Any before that? I don't know.
Note #2: This solution just moves the title to the bottom of the image, allowing you to use the title attribute as a caption. It doesn't actually create a new caption. So if titles are more important to you than captions and you absolutely need to have your titles on top, skip this and find another way.

So here's what you do: Towards the end of the shadowbox.js file, find where it says
K.markup
followed by a bunch of div tags. Something like K.markup='

.....blah blah blah.

Now take the part that says

and cut it out.

Then paste that chunk toward the end of that string of

tags so that in the end there are four

end tags in a row.

Should say something like
blah blah... onclick="Shadowbox.previous()">

';K.options={animSequence: ..... blah blah blah.

This will put your title below your image.

Now, search the code for *-1
That'll take you to an area that says ....infoHeight*-1,duration,function()......
Just before that, there's a little bit of code that says ......titleInner,"marginTop",titleHeight,duration);
Stick a *-1 in there after titleHeight. (it should say titleHeight*-1,duration)

That takes care of the direction of the title animation.

Save your shadowbox.js file.

Open your shadowbox.css file.

Change the height and line-height properties under #sb-title,#sb-title-inner to something like 60px for height and 14px for line-height. If you don't increase the height and decrease the line-height, you won't be able to see more than a line or so of your title/caption. 60/14 will get you about 4 lines worth of caption. Fuss with these numbers if you need more.

Also change the font-size property for #sb-title-inner to something less than 14 (default set to 16px). If it's more than 14, you're exceeding your line height and your lines are going to overlap.

Anyway, screw around with those three CSS properties to your liking and you're good to go. Just type everything you want to appear as a caption in the title part of your markup as explained in the usage section.

Good luck and thanks to all you coders who have the patience to write this stuff by hand. Big props.

Just to update this thread even futher, I got a sneaky little jQuery fix working :D

It requires no modification to shadowbox.js or even shadowbox.css ! Here's how it works:

1. Give your link the class "sb-link"

ie etc etc (remove the . before the a :P)


2. Right beneath your link, create a div with the class "sb-desc"

ie

This is my caption

3. In your CSS, define these rules:

.sb-desc { display:none; }
#sb-info-description { color:#FFF; font-size:16px}

or however you want to style your description

3. using jQuery, use the following code:





That's it! Try it out and see!