help with image captions javascript

[kanjigirl]

I'm a beginner with Javascript and am trying to get a captions script to work... Here's what I've done.

1) Inserted the captioning script from Boagworld (http://www.boagworld.com/technology/styled_images_with_caption/) along with the getelementsbyclassname function (http://www.robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/) into {literal}{/literal} tags in the head of my template.

2) Added the CSS classes in the Boagworld article to my template's CSS file.

3) Added an image to my site, selected imgRight as the class and gave it a caption by filling in the title field.

Now the CSS styling is working correctly, but the Javascript is not - it's not generating the block of HTML like so:

Code: Select all

<div style="width: 200px;" class="imgRight">
<img src="/images/foo.jpg" alt="Description of picture" width="200" height="147" class="img" title="The caption would go here" />
<p>The caption would go here</p>
<span class="spareSpan"></span>
</div>

I don't know what I'm doing and would be so happy if someone can help me get this working.

[viebig]

well, without a link, nobody will be able to help you!

please, send a link, by email, or pm or tinyurl if do no want to make it public

waiting to help you

best regards

[kanjigirl]

Doh.

http://tinyurl.com/5prryh

[cweese]

I am looking at the same problem (adding captions to an image) and found this in the developer's forum:

http://forum.cmsmadesimple.org/index.ph ... 272.0.html

[kanjigirl]

Yes - I tried the UDT mentioned in that thread and cannot get it to work (the CSS class is working but the Javascript is not). That's why I was trying the Boagworld method.

[cweese]

I figured out how to get the imagecaptions to work - maybe you are a little more astute than I was  but here's what worked for me with imagecaptions:

I found out if I apply to my image, it would indeed apply, so that ruled out problems with the css... but I still didn't see any caption.

I then double-checked the js absolute links.

Then I went to the Tags page and looked at the Help for imagecaptions -- if you read carefully you'll see that you have to apply a class called "caption", "rightcaption" or "leftcaption" to the image - however, in my wysywig styles list, I was trying to use "captionborderright" or "captionborderleft" since those are the ones that show up.

Adding the correct class by hand worked, now I'm going to add the styles to my css so they show up in the dropdown menu.

Yay!

[viebig]

Yes - I tried the UDT mentioned in that thread and cannot get it to work (the CSS class is working but the Javascript is not). That's why I was trying the Boagworld method.

try cweese fix, and let me know

[kanjigirl]

Which one in that thread are you referring to? I've tried the UDT and Boagworld and neither are working for me.

[cweese]

Here are the files I modified if you want to download & copy. I'll send them to the tag developer as well.

http://www.christinaweese.net/codesampl ... ptions.zip

So, this mostly worked great, except for one problem. When I used a single image floated right, it worked fine. But if I wanted to stack images on the right, I had to add "clear:right;" to the div so they would stack nicely. That fixes the stacked images, but for some reason buggered up the single image floated right.

Normally I would just make a separate div.class... so that's what I did, but I had to add it to the php file as well.

It's quite possible there was an easier way to do this, I am certainly no coding genius and don't know php at all. But it's in the site and it's working 

[kanjigirl]

Thanks - I'll try this out as soon as I can and post here with the results.

[kanjigirl]

Now I can't get even the CSS styles to work at all. I'm going to have to remove everything I added and start over, I think.