Question

I am attempting to add to a src of multiple images using jQuery as follows:

<img src="image.jpg">

to

<img src="image-thumb.jpg">

For some reason I can’t seem to wrap my head around this.

Any ideas?

Answer 1

First, add a class to the img tags you want the script to affect (e.g. <img src="image.jpg" class="foo">).

Then, use jQuery’s .attr() method to set the src attribute of all the img tags you want:

$('.foo').attr('src', 'image-thumb.jpg');

If your images are named differently and you just want to add -thumb to each one all at once, use a callback function:

$('.foo').attr('src', function(index, attr) {
    return attr.replace(/\.[^.]*$/, '-thumb$&');
});

In this second code example, I am using a regular expression to find and replace the ending of the image URL.