The javascript in image_caption.js:

$(document).ready(function(){
  $("img.caption").each(function(i) {
    var imgwidth = $(this).width();
...

Fires before some images are loaded, resulting in the image-caption-container class div having a width 0. This causes the caption to wrap and overflow, and allows other page content to cover the image being captioned (because its style properties have been removed). I was able to solve this issue by changing:
$(document).ready(function(){
to
$(window).load(function(){
Is there a better way to solve this problem? Any chance this fix will be added to the module?

Comments

davidwhthomas’s picture

davidwhthomas commented
Status: Needs review » Active

Applied to dev release pending community testing/review.

if(imgwidth != 'undefined' && imgwidth != 0){
   // only set container width if defined and greater than 0
    $(this).parent().width(imgwidth);
}

Once reviewed and working, please updated the issue status
http://drupal.org/cvs?commit=311770

davidwhthomas’s picture

davidwhthomas commented
Status: Active » Needs review
Geijutsuka’s picture

Geijutsuka commented
Status: Active » Needs review

I commented on this to confirm this behavior, but I spoke too soon-- my problem appears to be something else. I can't delete my comment, sorry for the clutter.

tirdadc’s picture

tirdadc commented

This worked perfectly for me, thanks. Do you need more feedback or should I go ahead and change the status?

davidwhthomas’s picture

davidwhthomas commented
Status: Needs review » Fixed

Patch applied and released in 6.x.2.5 http://drupal.org/node/703262

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

bcobin’s picture

bcobin commented
Version: 6.x-2.4 » 6.x-2.5
Status: Closed (fixed) » Active

Don't mean to reopen an old issue (although I guess I am), but I was running into an issue with attached images (using FileField and Imagecache and not the Image module) where the width was not being calculated in Safari. Note here that I'm not using WYSIWYG - I'm using Custom Formatters to rewrite the output, which has finally (let us hope) enabled me to solve the caption issue while using lightbox; the whole caption thing has been a thorn in my side for a long time now...

(I hate WYSIWYG - I think it causes more problems than it solves, actually.)

FF works, but in Safari, the long captions span the width of the entire div. In Safari, the js produces CSS of display: block;; whereas in FF the output was display: block; width: 280px;, which in my case is correct.

Changing $(document).ready(function(){ to $(window).load(function(){ fixes it; I note that although the post says this was committed in 2.5, both the release and dev versions use the "document" code.

Additionally, I've found that floating the image right "breaks" IE 6 and 7. (The image initially displays correctly, but when the caption with gets calculated, the div "hiccups," throwing content below the block.) My final solution here was to float the image left only for IE 6 and 7.

So between using Custom Formatters, changing the js to accommodate Safari and not floating right for IE 6 and 7, I finally have a cross-browser image caption solution that works! Thanks for the module - hopefully this will help to make it better or, at least, save somebody else the time of sussing all this out...

xaa’s picture

xaa commented

Changing $(document).ready(function(){ to $(window).load(function(){ fixes it; I note that although the post says this was committed in 2.5, both the release and dev versions use the "document" code.

seems working perfectly. thanks
I have setup the version 2.5 and tried the dev. On both, the line is still Changing $(document).ready(function(){ instead of the new one. I thought it was already included on the release ?

chrisfromredfin’s picture

chrisfromredfin
he/him/his
Primary language English
Location Portland, Maine
commented

in 7.x-beta3, I think you can change
$("img.caption:not(.caption-processed)").each(function(i) {
to
$("img.caption:not(.caption-processed)").load(function() {

to get the same result.

acbramley’s picture

acbramley commented
Version: 6.x-2.5 » 7.x-1.x-dev

Can confirm this bug exists in 7.x. There seems to be issues with using .load() on images see http://api.jquery.com/load-event/