Duplicate captions, or captions that do not display when using ckeditor

I think I have same issue as the content text is overwritten on the image and the caption since I use ckeditor,

Please see here

http://www.kurdistanica.com/

I too have a similar problem using CKeditor also ... can anyone help here.....I followed the instruction given in the image caption install and the content text overlaps. Furthermore you find that if you resize the image in ckeditor along with the caption class in place...it ignores the resized values.

HELP !!

Try these additional Modules for Ckeditor:
http://drupal.org/project/wysiwyg_imageupload
or
http://drupal.org/project/img_assist

hi Everyone,

I had the same issue with Image Caption creating duplicate captions.

I am using CKEditor, and during a trace, it was obvious that the Javascript code was running twice; i could not figure out why.

But, i was able to modify the code so that it only runs once.

I did it by adding an attribute ('captioned') on the first pass through. On the second pass, if that attribute exists, i bypass the remainder of the function. Thereby, only one caption is created.

This could probably go in the code itself, as it shouldn't affect any other editors. The only downside is the addition of a few characters in the added attribute.

Code follows:

/*$Id: image_caption.js,v 1.2.2.3 2010/02/03 07:50:25 davidwhthomas Exp $*/
$(document).ready(function(){
  $("img.caption").each(function(i) {
    
    //new code to fix duplicate captions, part one
    if ($(this).parent().attr('captioned') !== undefined) {
      //attr exists. stop processing. we have already captioned.
      return true; //stop processing of this iteration; same as "continue" for the loop
    }
    //end new code, part one
      
    var imgwidth = $(this).width();
    var imgheight = $(this).height();
    var captiontext = $(this).attr('title');
    var style = $(this).attr('style');
    var alignment = $(this).attr('align');
    //Clear image styles to prevent conflicts with parent div
    $(this).attr({align:""});
    $(this).attr({style:""});
    $(this).wrap("<span class=\"image-caption-container\" style=\"display:block;" + style + "; float: " + alignment + "\"></span>");
    $(this).parent().addClass('image-caption-container-' + alignment);
    if(imgwidth != 'undefined' && imgwidth != 0){
      $(this).parent().width(imgwidth);
    }
    
    //new code, part two
    $(this).parent().attr('captioned', 'yes');
    //end new code, part two
    
    $(this).parent().append("<span style=\"display:block;\" class=\"image-caption\">" + captiontext + "</span>");
  });
});