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

【问题标题】：Where can I find an automatic image caption script that places the caption under the image在哪里可以找到将标题放在图像下方的自动图像标题脚本
【发布时间】：2012-11-27 03:16:00
【问题描述】：

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

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

脚本要求：

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

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

【问题讨论】：

标签： javascript image caption

【解决方案1】：

这里有一些 jquery 插件，您可以使用它们来实现图像的标题

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/

【讨论】：

谢谢，但我已经看过那些了。我正在寻找一个在图像下方而不是在其顶部显示标题的标题。

【解决方案2】：

我刚刚找到了解决方案！ :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>

【讨论】：