I am trying to use this jQuery script to make an image caption from the alt tag:
$("#content img").each(function () {
var $this = $(this);
var title = $this.attr("alt");
$this.after('<div class="caption">'+ title +'</div>');
});
I am using another jQuery script before it and it is working fine. I can't seem to get the caption to alt script to work.
Example: www.cslack.com/test.html
Thanks,
Robert
On your example page, there is no such thing as #content which is why it doesn't work.
If you place a <div id="content"> around your content, then it should work.
$(function(){
$('a > img[style]').each(function(){
$el = $(this);
var style = $el.attr('style');
$el.attr('style','');
$el.parent().attr('style',style);
}); //Moves the inline styles
$("img").each(function(){
var title = this.alt;
$(this).after('<div class="caption">'+ title +'</div>');
}); //Adds the dynamic captions.
});
Your problem is that you're executing your code before the images exist.
You need to wrap the code in $(function() { code }) to make it run after the document loads.
Alternatively, you can move the <script> block to the end of the <body> tag after the img tags.
Also, your HTML doesn't have a #content element; you need to either change the selector to img or put all of the <img> tags inside a <div id='content'>.