I've tried to read the issue que carefully and integrate what's been already talked about into a more robust image_caption.js. I am would appreciate any troubleshooting to get IE working since 60% of my site traffic is IE.

Browsers Checked
Firefox 3.5.6 Working
Chrome 4.0.2 Working
Internet Explorer 8.0.7 Broken

/*$Id: image_caption.js,v 1.1 2008/02/23 06:24:07 davidwhthomas Exp $*/
$(document).ready(function(){
  $("img.caption").each(function(i) {
    if ($(this).width()) {
      // This image has a width and is ready to go
      process_image(this);
    } else {
      // This image has a width of zero and may not be completely loaded,
      // so we'll wait for the load event
      $(this).load(function(){
        process_image(this);
      });
    }
  });
});

function process_image(img) {
  var imgwidth = $(img).width();

    imgwidth += parseInt($(img).css("padding-left"), 10) + parseInt($(img).css("padding-right"), 10);
    imgwidth += parseInt($(img).css("margin-left"), 10) + parseInt($(img).css("margin-right"), 10);
	
  var imgheight = $(img).height();
  var captiontext = $(img).attr('title');
  var alignment = $(img).attr('align');

     if (!alignment) {
      var alignment = $(img).css("float");
    } 
  
  // Do not display a caption if the title attribute is blank
  if (captiontext) {
    
    $(img).attr({align:""});

    // Add an alignment class to the container so we can style margins and padding
    if (alignment == 'left' || alignment == 'right') {
      $(img).wrap("<div class=\"image-caption-container\" style=\"float:" + alignment + "\"></div>");
      $(img).parent().addClass('caption-' + alignment);
    } else {
      $(img).wrap("<div class=\"image-caption-container-center\"></div>");
    }
    $(img).parent().width(imgwidth);
    $(img).parent().append("<div class=\"image-caption\">" + captiontext + "</div>");
  }
}
.image-caption-container{
	border:1px solid #ccc;
	background-color:#F7F7F7;
	padding: 5px;
}

.image-caption-container-center{
	border:1px solid #ccc;
	background-color:#F7F7F7;
	padding: 5px;
	padding-right: 11px;
}

div.image-caption-container-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.caption{
	margin-bottom:5px;
}

.image-caption{
	text-align:center;
	font-size:80%;
	color:#666666;
}

.image-caption a{
	text-decoration: none;
	color:#666666;
	font-weight: normal;
}

.image-caption a:hover{
	text-decoration: underline;
}

.caption-right{margin-right:5px; margin-left:10px; padding-left:11px; padding-right: 5px;}

.caption-left{margin-right:10px; margin-left:5px; padding-left:5px; padding-right: 11px; }

.caption-center{margin-right:10px; margin-left:10px;}
CommentFileSizeAuthor
image_caption.jpg386.93 KBbryancasler