Using .wrap() function

Question

I'm trying to edit the code of some images of my website in the next way: For example, I have:

<div id="slideshowContainer473">
<img src="src_image1" alt="image1" title="image1" />
<img src="src_image2" alt="image2" title="image2" />
<img src="src_image3" alt="image3" title="image3" />
</div>

What I want, for each image, is to obtain:

<a href="src_image1" rel="lightbox"><img src="src_image1" alt="image1" title="image1" /></a>

That is, through jquery, gives to href the same value than src and I also need add rel="lightbox" because I think to use http://lokeshdhakar.com/projects/lightbox/

I think I can obtain it, using .wrap() I think .each() is also needed, right?

Answer 1

Try this

$('img').wrap(function() {
    return $('<a>', {
        src: $(this).attr('src'),
        rel: 'lightbox'
    })
})​

Check Fiddle

Answer 2

Try this

$("div#slideshowContainer473 img").wrap(function(){
    return "<a href=\"" + this.src + "\" rel=\"lightbox\" />";
});

Hope this will help !!