javascript - 在哪里可以找到将标题放在图像下方的自动图像标题脚本

Question

好的，我一直在寻找这个脚本很长一段时间，似乎有很多脚本将图像标题放在图像的顶部，但没有多少将它直接放在下面（就像在维基百科上一样） .

我找到了一个可以完成这项工作的工具，但它需要 MooTools 而不是 jQuery，它在 Google Chrome 中看起来很乱，甚至在 Internet Explorer 中也没有出现。但是，它在 Firefox 中看起来不错。所以我想我需要一些帮助才能找到这个。

脚本要求：

需要将标题直接放在图像下方，最好放在一个盒子里。
应该是跨浏览器兼容的。
相当容易设置（我对 Javascript 不太了解）。
根据 Alt 属性自动为图像添加标题。
根据图像对齐属性定位图像和标题（我使用的是所见即所得编辑器）。

我认为这涵盖了它。如果有人可以为此提供一些帮助，那将不胜感激，因为我确实花了几个小时寻找这个！

score 0 · Accepted Answer

我刚刚找到了解决方案！:D http://yabtb.blogspot.co.uk/2012/02/automatic-image-caption-from-img-title.html 所有功劳归于 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>