Где я могу найти автоматический сценарий подписи к изображению, который помещает подпись под изображением

Question

Хорошо, я долго искал этот сценарий, и кажется, что существуют тонны сценариев, которые помещают заголовок изображения поверх изображения, но не так много, которые помещают его непосредственно под (как в Википедии),

Я нашел тот, который выполняет эту работу, но для него требуется MooTools, а не jQuery, он выглядит испорченным в Google Chrome и даже не отображается в Internet Explorer. Тем не менее, он выглядит хорошо в Firefox. Поэтому я думаю, что мне понадобится помощь в поиске этого.

Требования к сценарию:

• Необходимо разместить подпись прямо под изображением, желательно в рамке.
• Должен быть кросс-браузерным.
• Разумно прост в настройке (я не очень разбираюсь в Javascript).
• Добавляет подписи к изображениям автоматически на основе атрибута Alt.
• Позиционирует изображение и подпись на основе атрибута выравнивания изображения (я использую 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>