Image Caption | JavaScriptSource

Image Caption

JavaScriptSource Staff Sep 17, 2007

General

With the help of this script, adding text to accompany images couldn't be easier. Give your image a "title" -- how appropriate -- and a class, and in less than a minute you'll have beautiful looking captions for your images. And, you can use HTML elements.


And here's some text about the photo in the surrounding paragraph...

The text in the paragraphs following the image will automatically wrap around it and its caption, so no more layout headaches when you have to change captions!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Notes

Text Formatting in Captions
Even though you're working within a tag's title attribute, you can still add HTML to your captions, provided you remember to use single quotes and escape your less than and greater than signs.

Need to Switch Sides?
If you add the floatr class to your image, it will float on the right side of your text instead of the left: class="imgcaption floatr"

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: arc90_imgcaption.js


CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.


Head

Paste this code into the HEAD section of your HTML document.


Body

Paste this code into the BODY section of your HTML document


Leave a Response

(8 comments)

Your question is beyond the scope of these comments. You will need to post it over on [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]the JavaScript forum[/a]. Thanks!

Lee Oct 31, 2008

Sorry, but I am completely unable to get this to work at all. I have uploaded a sample to my test site(at above). Perhaps you can tell me where I am going wrong.[br /]I would be most grateful.[br /]The css and java copied exactly as per your scripts.[br /]Many thanks[br /]Eric Pugh

Eric Pugh Oct 24, 2008

I m using MSIE and it's working just great.[br /]It's also working good with firefox.[br /]Thank you

Abdu Jan 16, 2008

Not sure. It works fine for me. You will need to submit your question to the [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]JavaScript Forum[/a] for further help.

Lee Nov 6, 2007

It works fine for me in FF 2.0.0.9. You will need to submit your question to the [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]JavaScript Forum[/a] for further help.

Lee Nov 6, 2007