Where can I find an automatic image caption script that places the caption under the image

Question

Ok, I've been searching for this script for a long time and it seems that there are tonnes of scripts out there that put an image caption over the top of the image, but not many that put it directly under (like on Wikipedia).

I have found one that does the job, but it requires MooTools rather than jQuery, it looks messed up in Google Chrome and it doesn't even show up in Internet Explorer. However, it looks fine in Firefox. So I think I'll need some help finding this one.

Requirements of the script:

• Needs to position the caption directly under the image, preferably in a box.
• Should be cross-browser compatible.
• Reasonably easy to set up (I don't know much about Javascript).
• Adds captions to images automatically based on the Alt attribute.
• Positions the image and caption based on the image Align attribute (I'm using a WYSIWYG editor).

I think that about covers it. If anyone can offer some help on this it would be much appreciated as I've literally spent hours looking for this!

Answer 1

Here is some jquery plugins which you can use for implement caption for image

http://www.jquery4u.com/plugins/30-text-captions-overlay-image-plugins/

http://iwantaneff.in/repo/plugins/effects-ui/capty/index.html

http://www.net-kit.com/10-jquery-caption-plugins/

Answer 2

I've just found the solution! :D http://yabtb.blogspot.co.uk/2012/02/automatic-image-caption-from-img-title.html All credit goes to MS-potilas.

    <script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
<style type='text/css'>
.caption-text { clear:both;color:#666;font-size:90%;text-align:center;margin:0 0 6px;padding:3px 0 0; }
</style>
<script type='text/javascript'>
//<![CDATA[
// Add captions to images from title tag
// by MS-potilas 2012. See http://yabtb.blogspot.com/
function addCaption(img) {
  var ele=$(img);
  if(ele.parent().is(".caption-wrap")) return;
  var title=ele.attr('title');
  if(title=="") return;
  if(ele.parent().is("a")) ele=ele.parent();
  var align=ele.attr("align");
  if(!align) align=ele.css("float");
  if(align=="") align="none";
  var container=ele.wrap('<div style="display:inline-block" class="caption-wrap '+align+'" />').parent();
  container.css("float", align);
  container.css("width", ele.outerWidth()+"px");
  container.css("margin-left", ele.css("margin-left"));
  container.css("margin-right", ele.css("margin-right"));
  container.css("margin-bottom", ele.css("margin-bottom"));
  ele.css("margin-left", "0px");
  ele.css("margin-right", "0px");
  ele.css("margin-bottom", "0px");
  var text=container.append('<p class="caption-text">'+title+'</p>').find(".caption-text");
  text.css("width", ele.outerWidth()+"px");
}
// add captions on doc ready to img's with class "caption"
$(document).ready(function() {
  $("img.caption").each(function() {
    addCaption(this);
  });
});
//]]>
</script>