Quantcast

Captions

classic Classic list List threaded Threaded
21 messages Options
12
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Captions

jaschwege
is there any sort of functionality available for captioning photos?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Captions

Zimmer
I have made captions work in version 3.0.3 by doing the following...add the bits in blue below...

In shadowbox.js add...

...get("sb-title-inner").innerHTML=obj.title||"";get("sb-caption").innerHTML=obj.link.rev||"";var close,next,play,pause,previous;...

...<a id="sb-nav-previous" title="{previous}" onclick="Shadowbox.previous()"></a></div><div id="sb-caption"></div></div></div></div></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!
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Captions

habagase
Thanks, Zimmer. Unfortunately, It seem to be breaking my code. When I make the specified changes, the box appears, but does not expand and no image loads. Could it have to do with the fact that I am using the hack to trigger galleries from Flash?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Captions

jack
In reply to this post by Zimmer
YOU...ARE...A...LIFESAVER!!!
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Captions

habagase
In reply to this post by habagase
I got it! Because I was declaring the parameters in a function rather than the link, I had to change

get("sb-caption").innerHTML=obj.link.rev||"";

to

get("sb-caption").innerHTML=obj.rev||"";

Thanks again for the great workaround!
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Captions

kibblebutt
In reply to this post by Zimmer
This is GREAT! Thanks for doing this work around, it is awesome!

One question, do you know if it is possible to have a slightly larger caption box area? I have several lines of text I would like to put under an image. I tried changing the height in the css document to no avail, does there need to be changes to the js document as well?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Captions

Zimmer
To change the height of the captions area, with the css you added to the bottom of your shadowbox.css file, adjust the height in blue below...

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

With the hight attribute above, you could also use height:auto to auto adjust to the amount of content. The downside to using the auto value is that if the shadowbox popup is larger than the browser window size (ie shadowbox auto shrinks to fit browser window), the caption area will be invisible to the user (it will be below the base of the browser window). You can see the effect by opening up a shadowbox popup, then reduce the size of you browser window to see what happens. If you use a fixed height value, the captions area will always be visible.

The reason for this is that because the height of the box is not fixed (auto), shadowbox cannot use this height value together with the rest of the window's heights to re-calculate the size to shrink the popup to, so it's kind of disregarded, thus goes below the base of the page.
Ben
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Captions

Ben
In reply to this post by Zimmer
Thank you so much!!!!!! This has solved so many of my problems.
Note: you have to click that you are going to include everything on your website for the "get("sb-title-inner").innerHTML=obj.title||"";get("sb-caption").innerHTML=obj.link.rev||"";var close,next,play,pause,previous;..." to be in shadowbox.js, I was having a lot of trouble finding it because I said I only wanted photos when downloading.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Captions

colorrot
In reply to this post by habagase
habagase wrote
I got it! Because I was declaring the parameters in a function rather than the link, I had to change

get("sb-caption").innerHTML=obj.link.rev||"";

to

get("sb-caption").innerHTML=obj.rev||"";

Thanks again for the great workaround!

I don't get how you got this to work in flash. I don't have any broken code anywhere and even made the change habagase did. All I get is what shadowbox usually looks like (title, image/movie, close)

In my html file, I changed the header code to include a caption area:


<script type="text/javascript"> function openShadowbox(content, player, title, caption){ Shadowbox.open({ content: content, player: player, title: title, caption: caption }); } </script> 

but that doesn't seem to change anything. My function in flash is on a thumbnail that's a button and is coded:


on (release) {
                getURL("javascript:openShadowbox('http://www.example.com/test.jpg', 'img', 'title', 'this is a test caption')");
}


What am I missing?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Captions

colorrot
I've figured it out! If you're launching this from flash, make sure to add this to your main HTML file:


<script type="text/javascript"> function openShadowbox(content, player, title, rev){ Shadowbox.open({ content: content, player: player, title: title, rev: rev }); } </script> 

yessssssssssssssss
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Captions

Mike
In reply to this post by Zimmer
I can't find this code in the .js file. I don't know what I'm doing wrong but when I do a search within the document, this code does not appear as you wrote it.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Captions

Groot
Yup I can't find it either.. in v 3.0.3

Any suggestions??
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Captions

Groot
Fixed - I downloaded Shadowbox using the standalone adapter, so I guess the code's different.

In this case I fixed it changing the first bit of Zimmers instructions above:

instead of adding:
get("sb-caption").innerHTML=obj.link.rev||"";

look for this in the script:
ad("sb-title-inner").innerHTML=aJ.title||"";

and add this in directly after it:
ad("sb-caption").innerHTML=aJ.link.rev||"";

Then follow the rest of Zimmers instructions as above.

Simples.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Captions

andrewmcconville
In reply to this post by Zimmer
Will google and other webcrawlers index the text in a rev tag?
This is important to me because almost all the text on my site will be in captions which will be in rev tags; so if a webcrawler does not see rev tags the only text seen on my site will be the navigation menu.

Also, under the preview image that I am enlarging via shadowbox, I have a div that contains a title and another div with a short description and a linked anchor to another site. I'm hoping there is a way I can take that top most div and all it's children div's, paragraphs and links and just reuse them as the caption in shadowbox; instead of duplicating everything in the rev tag.

Your method does work, and I thank you for that, but the div's, paragraphs and links are awful to look at when they are mashed into the rev tag.

Here's a live version of what I'm trying to accomplish:
http://andrewmcconville.com/live/webdesign.php

Thanks, and thank you for the original rev solution.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Captions

HTML5 user
In reply to this post by jaschwege
The "rev" attribute has been removed in HTML5.

http://en.wikipedia.org/wiki/Link_relation

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Captions

arttronics
Here's an updated thread that explains the above fix in a little more detail.

As for the rev attribute being removed from HTML5, updating the mod's attribute tag name is easy to migrate upwards for those web pages created with a !DOCTYPE for HTML5.

When posting your markup here on the forum follow these simple steps:

0. Login and paste your markup into the Message Box.
1. Mouse select the markup you just pasted.
2. Press the More Button from the Message Box Toolbar.
3. Select Raw text from the drop down menu. DONE!

If I don't respond to your POST, it's your inability to provide your markup correctly.

Check out a few DEMOS I made that are here in this forum.

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Captions

Mike Ketties
In reply to this post by Groot
Groot - you're amazing. This fixed it.
Thank you! Love the results.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Captions

Mike Ketties
In reply to this post by Groot
Looking more into this - it seems to have broken my videos. Now they only pop up with a "loading" box and the content never shows up.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Captions

Vitaliy
In reply to this post by Zimmer
Zimmer,

Thank you!
Your workaround was very easy 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;}

(I want the caption to appear inside the wrapper, hovering over the image)

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 you or anyone else, can help me with a work-around for this issue.
Maybe, something that tells shadowbox to NOT DISPLAY #sb-caption, if the rev="" is NOT SPECIFIED.

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.

...or maybe some other way to get the padding/background effect I'm going for.

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Captions

Kris Hunt
In reply to this post by Zimmer
I, too, wholeheartedly thank you, Zimmer.
12
Loading...