Changing src attributes of images

Question

I'm trying to avoid having to create duplicate images (one thumbnail one full size) with my usage of slimbox.

I have the 'thumbnail' image scaled to 100% width and height 'auto' so they all fit nicely in their parent container, scaled to thumbnail size. Clicking opens the full size image in a lightbox. That part is good to go.

What i would like to improve upon is the actual relationship between the two images. Currently I have

<a href="path/to/image.jpg" rel="lightbox" title="some title">
<img src="path/to/image.jpg">

Since they are using the same image, I would like to programmatically populate the

<a href="XXX">

with the same path as the image source. I think i can use sibling selector ".next" to do this and add a class to the itself.

$(function(){
    $('a.foo').each(function() {
        $(this).next('img').attr('href', this.href);
    });
});

obviously that isn't working, syntax is incorrect. Can anyone suggest a good way to do this? thx!

Answer 1

You are on the right side and there is no syntax error in your code, but images have no href attributes, you should modify their src attributes, Try this:

$(function() {
    $('a.foo').each(function() {
        $(this).next().attr('src', this.href);
    });
});

---

$(function() {
    $('a.foo').each(function() {
      var src = $(this).find('img').attr('src');
      $(this).attr('href', src)  
    });
});

DEMO