Congrats and thanks for this useful tool.
Very interesting solution javascript based.
There is a pure CSS solution at:
http://www.maxdesign.com.au/presentation/definition/dl-image-gallery.htm

Posted on July 24, 2006 10:46 AM by Maujor

I'm curious why so many people love the pure CSS solutions to our tools. Both meet standards and produce the seemingly same effect and resulting HTML, and each certainly has merit. Although the pure CSS methods require all the HTML to be hand coded for each effect occurance while the JavaScript solution allows for a simple class to be added where you want the effect to occur. I see the JavaScript methods making things easier in the long run unless you're using a blog plugin to add the HTML at the time of writing for you.

Posted on July 24, 2006 10:55 AM by Joel Nagy

Having a little problem with this in that my caption doesn't appear. The images appears and is aligned correctly, but no text...any ideas?

Posted on July 26, 2006 10:08 PM by Bruce

@ Bruce
Maybe, and I'm just guessing, simply include your caption url into the flow of the text, and not wrapped in it's own p tags. !!!

Posted on July 26, 2006 11:29 PM by John

Hey Bruce -

Your implementation code is correct, but it looks like the script isn't in the right place. Verify that you've uploaded it to the same location that you reference on the page.

Thanks for your interest; your page is a great application of our tool.

Posted on July 27, 2006 9:16 AM by Chris LoSacco

Sweet script. Is there any way to make captions wrap automatically at the image width without specifying the image width in the CSS?

Posted on July 27, 2006 9:31 AM by David Walker

David -

The caption is currently wrapping to the width of the image. Is there some other behavior that you're looking for?

Posted on July 27, 2006 9:36 AM by Chris LoSacco

OK...I was one letter off. Thanks.

Now however, the image and caption show up fine in IE, but in FireFox, the image appears partly behind the paragraph text.

Any ideas here?

Posted on July 27, 2006 10:35 AM by Bruce

Regarding image width - it has to be set in the CSS so you can only have images of the same width on one page.

Bruce's site mentioned above shows this:

http://www.bostonsportsmedia.com/blitz/

It would be great if the script could somehow pick up the image width automatically and adjust to it.

Posted on July 28, 2006 2:54 AM by Chris

Chris, Bruce, David -

We're aware of the quirks with specifying the width, and we're playing with some solutions right now. Stay tuned.

Posted on July 28, 2006 9:22 AM by Chris LoSacco

The image size issue has been fixed. You can see it working on the example page and the same code is in the download as well. We tested it across the same browsers as before, but let us know if you notice any issues with your own sites.

Thanks for telling us about the problem.

Posted on July 28, 2006 4:37 PM by Joel Nagy

Perfect!

Thanks for the help.

Posted on July 28, 2006 4:54 PM by Bruce

Thanks guys - works a treat now and a great script!

Posted on July 30, 2006 6:43 AM by Chris

Could I get a little more information on how to format the caption text. Its a little too bold for my page i think.

Posted on July 30, 2006 8:35 PM by RC

RC -

The stylesheet from the WordPress theme you're using for your page specifies that all links should have a bold font, and since the image you added a caption to is a link, its text is appearing bold.

To fix this, add "font-weight: normal;" to the arc90 style code, like this:

.arc90_imgcaption { font-weight: normal; text-al ...

Hope this helps.

Posted on July 31, 2006 9:03 AM by Chris LoSacco

Could I get a little more information on how to format the caption text. Its a little too bold for my page i think.

Beautiful though, I love playing with this. And the linkthumb is very kewl too.

Posted on July 31, 2006 10:35 AM by RC

Sorry for the double posting above. I did however have another question. Is there anyway to disable the border part of image caption? I have disabled it in my style.css page, so I was wondering if this was something the jsp did?

Posted on August 1, 2006 12:58 PM by RC

RC -

Just remove the text border: 1px solid #DDD; from the style tag we provided. This should remove the border.

Posted on August 1, 2006 1:12 PM by Chris LoSacco

Hi,
How can I get the image captions to be generated in Ajax-added content. I'm using prototype.js I can probably slog through it myself, but hope you can save me some time. I want image captions to be generated whenever I load new content with to-be-captioned images onto an existing page.
Thanks,
Leland

P.S. Love your neat, simple tools!

Posted on August 15, 2006 12:16 PM by Leland Scott

Leland -

Sounds like your project is a bit too involved for us to help out. However, feel free to add your own extensions to our script.

My suggestions is to read up on modifying an elements attributes with JS - remember, all an img tag needs is a class and title to appear captioned.

Thanks for your interest!

Posted on August 15, 2006 12:41 PM by Chris LoSacco

I have been horribly frustrated with creating captions and this looks like a great solution.

Though, I'm having trouble getting this to work within a full version of WordPress. First, I'd like the styles to be in the stylesheet, not embedded in the head. Is that possible?

Second, while it sizes the image wonderfully, the font sizes and border are not appearing and it is not staying within the paragraph tag. This could be an issue with WordPress's wpautop filter stripping out extraneous code. I could have some conflicting CSS styles, so I will look into those, too.

Anyone else reporting trouble making this work with WordPress?

Posted on August 21, 2006 12:52 PM by Lorelle

Amazing. Its very well and neatly coded, worked immediately, and solves what had become a major headache as there was no satisfactory way of having captions in WordPress and this was getting on my nerves.

On top of that, it actually improves the style layout of my posts and the code is extremely lightweight.

And it didn't break my XHTML validation, wheras a lot of JS stuff does.

So, basically, congratulations. No feature requests, except maybe you could consider integrating bloquote sources as the problem is very similar and it would be convenient to have both issues dealt with in one plugin.

Posted on August 26, 2006 10:31 AM by Astorg

There seems to be an issue (with my site anyway) on IE, which I hadn't spotted earlier as I work entirely on a Mac. The images display fine on Firefox for Mac, and on Camino, and on Safari, but IE 6 for Windows users have reported that (1) the image formatting doesn't display properly (i.e., the text doesn't wrap, but starts at the bottom of each image), and that (2) the caption doesn't display at all.

In addition, since installing the plugin it (3) throws my sidebar to the bottom of the page (common problem, IE loves doing that on the slightest pretext...). This problem (3) though is a known issue with my theme, although I had managed to get the sidebar back up again just before installing this plugin.

If the issue can't be fixed, I'll have to give up using the plugin as 60% of my readers, sadly, use IE despite its being so pathetic.

Anyone had this issue and are there ways of solving it?.????

Posted on August 26, 2006 9:34 PM by Astorg

Great script - many thanks. I'm using it, but have a problem with extra blank spaces appearing at the start of the first line of text in the paragraph next to the photo. See http://www.lynnefeatherstone.org/2006/09/flowers-veg-library-and-hospital.htm for an example of the problem.

Any tips on fixing this? It seems to work ok without the extra spaces some of the time, so this has me stumped ... but maybe I'm just missing something very obvious!

Posted on September 3, 2006 2:41 PM by Mark

Mark -

What an odd bug. It looks like IE is leaving those spaces when it floats the image to the right of the text.

To fix it, you can put the image tag AFTER the first line of text in the paragraph. It will slightly change the appearance, but at least those spaces will disappear.

Posted on September 5, 2006 3:54 PM by Chris LoSacco

Ah, of course - good work around. Many thanks Chris.

Posted on September 5, 2006 4:05 PM by Mark

Very cool script, solves a big headache. Thanks a million for making it available.

But, in my hands, the script doesn't seem to work properly in Safari (v. 2.0.4) -- image doesn't resize to specified width.

Everything's fine in Firefox and iE.

Posted on October 22, 2006 10:18 AM by Michael

OK. Here's how I fixed this problem -- though I don't know why it works.

I noticed that other images -- that neatly spanned a full Wordpress column in the other browsers -- overflowed the column in Safari. So there's clearly some broader issue with how Safari builds Wordpress columns.

Anyhow, if I added "width=100%" to the img tags, they got back into line. And the imgcaption image now behaved properly as well.

I don't know if anyone else has seen this, but perhaps this fix will work for others. And it certainly taught me that I need to make sure my pages display properly on all browsers.

Any ideas, though, why this might happen?

Thanks again.

Posted on October 22, 2006 12:55 PM by Michael

Michael -

Very odd. It may be a problem with the widths in the styles of your WordPress theme (namely, with the max-width items defined). Since you've already put through the fix, we can't be exactly sure.

In any case, thanks for letting us know that the issue exists, and for providing a useful fix.

Posted on October 23, 2006 11:07 AM by Chris LoSacco

I am using this code for thumbnail images which already have the tag around them (which link to the larger sized images). When I use this script, the gets created inside the tag, causing Internet Explorer to have problems with the image link.

So, this is the situation:
- starting HTML:
- automatic caption code makes it:
- how do I make it: ?

I've tried editing the javascript. But while I did figure it out for a similar script (http://xaprb.com/blog/2006/10/29/automatic-image-captions-with-unobtrusive-javascript/)
I couldn't figure it out for this one... The reason I prefer this script is because it doesn't need the prototype library (which conflicts with a jquery script elsewhere on my page..).

I hope you can help me out, or give me pointers on how to achieve it. Many thanks in advance :)

Posted on December 10, 2006 1:01 PM by Framboos

Ah, some tags were stripped away in the comment. Here is the text again:

So, this is the situation:
- starting HTML: (a) (img) (/a)
- automatic caption code makes it: (a) (div) (img) (/div) (/a)
- how do I make it: (div) (a) (img) (/a) (/div) ?

Posted on December 10, 2006 1:03 PM by Framboos

Nevermind the previous two comments of me - I already figured it out!

Posted on December 10, 2006 6:13 PM by Framboos

nice tool!
ive implemented it on a site and ive hacked the css, so i'mall clear on that side of things, but I only want to use the alt tag and not the description tag and there is a BIG space below the image as a result. where in teh .js file do i go to manipulate the depth of the bottom of the class area (i.e space below the image)

demo:

| image |
----------
text x
space
---------
get rid of 'space'

any help would really be appreciated

Posted on February 23, 2007 9:56 AM by nick garner

Nick -

You'll have to tinker around with the JS to get it right. Look for the section that adds the element for the description. You could also try and achieve the same effect using more CSS tweaks.

Thanks for your interest.

Posted on February 27, 2007 9:28 AM by Chris LoSacco

great great tool! just saved my bacon as i was having a devil of a time with what i had tried. two Q:
1) How can I use this same script for images that i want to center on a page ? ...basically for images that have to be a full column wide but with a the caption underneath to have a consistent handling of images with captions. do we just leave out the floatr / floatl option?
and
2) I have a div class that adds a shadow background to images (Casts a Shadow Bottom and to Right of image) and this doesn't work with the js script. any one have suggestions on how to add such a feature?
PS i just noticed that either class="floatleft" or "floatl" how come?
once again thanks for this supper tool.

Posted on March 11, 2007 6:11 PM by vanni

Vanni -

The images have to float. You could wrap the image in another floating, centered div to get it in the center.

Make sure the shadow script is executed after the caption script - our JS modifies the img tag, so you may be experiencing problems there.

Posted on March 12, 2007 9:47 AM by Chris LoSacco

Links in images doesn't work in explorer. ¿suggestions?

Posted on March 14, 2007 2:30 PM by Juan

Juan -

Not sure exactly what you mean, but the script only supports the img tag, so any other tags will not work.

Let us know if there's something specific you're trying to do.

Posted on March 14, 2007 2:36 PM by Chris LoSacco

Thanks, your script is great but I have a problem commented in a previous post. I'm trying to use the script with linked images as

(a) (img) (/a)

The script transforms it to

(a) (div) (img) (/div) (/a)

This kind of links doesn't work in explorer ( it's ok in other browsers )

I'ts possible to get

(div) (a) (img) (/a) (/div)

(or other solution to get links working?

Thanks

Posted on March 15, 2007 5:18 AM by Juan

Juan -

That would require a somewhat significant change to JS - feel free to dive in to the code and play around with the order of the nodes to see if you can maintain the (a) tags.

Posted on March 15, 2007 10:12 AM by Chris LoSacco

funny thing.... but on firefox (mac and win) the images are not appearing at the correct size.... they are reduced in width and height.
even if i add the width & height value they do not display at the size specified. They work fine in Safari, but are broken on IE 7 on win as well. ??? Anyone have this problem? any fix?

Posted on March 20, 2007 5:43 PM by vanni

trial and error led me to find the solution.... i added " " to the front of each img=src tag and that fixed the problem. Now the images display correctly in all browsers on both platforms! w00t! i'm happy again. ...love yr script!

Posted on March 20, 2007 6:09 PM by vanni

that should read that i added these div style="clear:both;" /div but with the proper angle brackets ;-)

Posted on March 20, 2007 6:24 PM by vanni

I'm currently thinking of implementing this on a new website design. I have already portioned out a section of the site for credits and copyright information for various tools/fonts/scripts that I used in the design. This script is licensed under Creative Commons Attribution 2.5 license (which is supposedly outdated). Under the license, we are allowed to modify to our needs, and use it freely. However, it also states that we must attribute the work "specified by the author or licensor".

So...how would you like us to attribute this to you?

(P.S. - Having email required, but then freely viewable is somewhat obnoxious. Glad I have a spare account.)

Posted on May 9, 2007 12:37 PM by Brendon Kozlowski

Brendon -

You can credit the script to Arc90 with a link to the original lab post in your credits and copyright section. Thanks much!

Posted on May 9, 2007 1:07 PM by Chris LoSacco

Thanks Chris! I believe that was the link I had used, but at least now I have verifiable information. Thanks for the work, and the help!

Posted on May 9, 2007 1:35 PM by Brendon Kozlowski

there was a bug for me. it seems when you clone the image node, it loses the proper width attributes. my images were getting all squished up.

i changed line 61 from this

w = arc90_getStyle(I, 'width', 'width');

to this

w = arc90_getStyle(o, 'width', 'width');

which is referencing the original object instead of the clone. seems to work now.

the only other things i'd suggest is to make this a proper plugin that just injects the js itself, and make the script a little smarter so that it automatically captions everything with alt text?

thanks for the all the work!

Posted on September 20, 2007 6:12 PM by Hairloss

Hello, this is a nice script.

I had a lot of problems using it in DotNetNuke with images taller than the content per se and I had to use a float fix, found at

http://www.quirksmode.org/css/clearing.html

Email me if you have questions about how I fixed things and also post a comment...

My other question is, how can I change the script so that I can use in the CSS floatleft and floatright instead of floatl and floatr?? This would make using it more intuitive

I tried modifying these lines without any success, I know these are the lines to work on, but not what to change:

var f = o.className.replace(/(.*)float(l|r)(.*)/, '$2');
var s = arc90_newNode('div', 'arc90_imcaption'+ i, 'arc90_imgcaption'+ (f.length == 1? ' float'+ f: ' floatl'));

Meanwhile, I'll keep experimenting.

Thank you, Tom

Posted on January 25, 2008 9:25 AM by Tom

I figured out with further testing that this script works with either floatl or floatleft and floatr or floatright.

My new question new is how do I do something to have the images display one way on some pages and a different way on other pages??

I unsuccessfully tried using an id tag in my stylesheet -- #different .arc90_imgcaption -- but this had no effect.

I prefer that this script NOT automatically caption all images -- I want selective captioning.

Thank you, Tom

Posted on January 25, 2008 3:03 PM by Tom

Hi Chris,

Mozilla just updated Firefox to version 2.0.0.12 and it seems to have changed something that's causing the script render incorrectly as you can see on your own example (http://lab.arc90.com/tools/imgcaption/) , although it works great on all other browsers

I would like to use this script on my site as I can't find any other script that comes close in what it does, great work. Any chance you can fix the script to work on Firefox again.

Thanks & Regards
Said

Posted on February 9, 2008 4:34 AM by Said

On FF 2.0.12 for Mac (OS 10.4.11) getComputedStyle returns always "0px" for the image width, that's what breaks the layout (since the p's and div's for the caption are set to width=0).

I tried to get the styles from the original image instead of the clone as suggested by the comment by "hairloss" above, but in that case getComputedStyle (getPropertyValue) returns "auto" which isn't helping either.

Since I can only second Saids praise for this script I would be interested in a fix, too.

Regards

Posted on February 11, 2008 4:04 PM by Eike

Thank you so much for the code. Works great and I am a total newby with JS and all.

Posted on March 25, 2008 12:49 AM by Mike Buettner

Is there a simple way to edit the js to eliminate the second text field? I only need to add a single title and would like the box to be smaller.

Posted on March 25, 2008 2:44 PM by Mike Buettner

You can get the caption to your liking by editing the CSS.

Posted on April 22, 2008 4:33 PM by Tom

It appears the script does not work correctly with lists in Firefox. A list item will not wrap around the image.

Even more frustrating, a nested list won't wrap around. So what I have is just a smaller column all the way down the page until the nested list ends.

Any help?

Posted on April 23, 2008 9:12 AM by Fred