CODEWITHSUNDEEP
javascriptimagecaption
Niall
Niall

Reputation: 23

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

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:

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!

Upvotes: 1

Views: 1457

Answers (2)

Niall
Niall

Reputation: 23

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>

Upvotes: 0

Miqdad Ali
Miqdad Ali

Reputation: 6147

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/

Upvotes: 0

Related Questions