I want to get the title attribute from an image and add it to the surrounding link

Question

So far I have this:

var imageTitle = $("a.articleimages img").attr("title");

$('a.articleimages').attr('title', (imageTitle));

The problem is it takes the first image's title and repeats it on every link. I can pull it off with IDs but it creates a lot of code because you have #image1, then #image2 and so on. Which to me seems excessive and stupid there must be an easier/better way. Maybe there is some way for it to know which image has been clicked and pull the title from that.

I want to do this so users don't have to retype an image title for it to be seen on Fancybox.

If there is a way to alter fancybox and get it to grab the thumbnail image title and show that for the full size image then I’d be happy with that too.

Thanks

Answer 1

Given that the img is a child of the a that you want to set the title for you could try something like this:

$('a.articleimages img').each(function(idx, element) {
   $(element).parent().attr('title',$(element).attr('title'));
});

Answer 2

$("a.articleimages img").each(function() {
  var $this = $(this);
  $this.parent().attr('title', $this.attr('title'));
});

Answer 3

var imgs = $("a.articleimages img");

imgs.each(function(i, ele){
    var img = $(ele);
    var title = img.attr('title');
    img.parent('a').attr('title', title);
});