Add image 'src' to '<a>' tags

Question

I am using the JQuery Cycle Plugin with thumbnails. This works fine if I use images as my slides. But I want to wrap these images in <a> tags. This breaks the thumbnail as the code looks for the src within the first, parent element of each slide and of course the a tag does not have this. eg:

//THUMBNAILS    
pagerAnchorBuilder: function(idx, slide) { 
        return '<li><a href="#"><img src="' + slide.src + '" width="145" height="88" /></a></li>'; 
    }

What I want to do is somehow attach the image's src to its parent element, so that the above code can read it. Something like:

<a href="page.html" class="slide" src="image.jpg"><img src="image.jpg"></a>

But it seems my browser automatically detects this is incorrect and renders it out.

Does anyone know a way to get round this?

You might wanna use data-src. data-* attributes are allowed pretty much anywhere. — Darkwater

Jude Duran Jude Duran · Accepted Answer · 2013-06-03T02:20:26

Try this when you finished rendering the page:

$("img").each(function(){
  var imgSrc = $(this).attr("src");
  $(this).parent().attr("src", imgSrc );
});

It will loop all img tags and then copy their src attribute to their immediate parent.

Add image 'src' to '<a>' tags

1 Answers