Question

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

我找到了一个能完成这项任务的人，但它需要MooTools而不是jQuery，它看起来在谷歌浏览器中搞砸了，它甚至没有出现在Internet Explorer中。但是，它在Firefox中看起来很好。所以我想我需要一些帮助来找到这个。

脚本要求：

需要将标题直接放在图像下方，最好放在一个盒子里。
应该是跨浏览器兼容的。
设置起来相当容易（我对Javascript知之甚少）。
根据Alt属性自动为图像添加标题。
根据图像Align属性定位图像和标题（我使用的是WYSIWYG编辑器）。

我认为这涵盖了它。如果有人可以提供一些帮助，我会非常感激，因为我花了好几个小时来寻找这个！

Answer 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/

Answer 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>

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

2 个答案: