jQuery append img src

Question

How can I add "_small.jpg" to the img src of a bunch of images I have in a div called "banners"?

I have a jQuery script listening for window resizes - and when below 400px I want to change the img src of the images to include "_small.jpg" at the end to call in the small image source. So...

<img src="example.jpg" />

when viewed at screen sizes below 480px would then become

<img src="example_small.jpg" />

How would I do this?

P.S. I'd like the script to loop through all the images in the "banners" div to update them btw :)

I think this is not a nice move, because if you have the src set to example.jpg in your html, those images will be loaded anyway and then replaced when you add the _small string. I would either leave the src empty and load all the images with js (depending on the screen size) or set the size of the images in your css. — Jonas Grumann, Mar 10 '14 at 15:42
I want to load a different image with different aspect ratio for small use cases on the carousel - hence the question - keeping the same source at 100% is easy - but means you have a carousel which looks nice on desktop and crap on mobile if you use the same img src scaled to the width whilst maintaining aspect ratio :) — dubbs, Mar 10 '14 at 17:17

score 1 · Answer 1 · answered Mar 10 '14 at 15:41

1

You can do:

$("div.banners img").each(function() {
    $(this).attr("src", function() {
        var src = this.src.split(".")[0];
        return src + "_small.jpg";
    });
});

(The above assumes image names have no "." in them and all have a type of JPEG)

answered Mar 10 '14 at 15:41

tymeJV

103,943
14
161
157

You don't need to iterate through the images, `$('div.banners img').attr` should be enough http://jsfiddle.net/Alfie/SrH8X/ – Anton Mar 10 '14 at 15:42

score 0 · Answer 2 · answered Mar 10 '14 at 15:42

You can try with:

var src = $('img').attr('src'),
    ext = src.substr( src.lastIndexOf('.') );

src = src.replace(ext, '_small' + ext, src);

$('img').attr('src', src);

Or with regex:

var src = $('img').attr('src'),
    src = src.replace(/(\..*)$/, '_small$1', src);

$('img').attr('src', src);

score 0 · Accepted Answer · edited May 23 '17 at 12:13

0

You might try:

// define this somewhere in your code (credit: https://stackoverflow.com/questions/280634/endswith-in-javascript)
function endsWith(str, suffix) {
    return str.indexOf(suffix, str.length - suffix.length) !== -1;
}

if ($(window).width() < 480) {
  $("div.banners img").each(function() {
    if (!endsWith($(this).attr('src'), '_small.jpg')) {
      // if you have more than "jpg" files you will want to replace those as well
      $(this).attr('src', $(this).attr('src').replace(/\.jpg/, '') + '_small.jpg');
    }
  });
}

I believe that should do it!

Edit - Added an extension remove based on a comment. For more information on replacing extensions see this stack.

Edit 2 - Added a check for "endswith" in case the function is called on items that already have the small extension added!.

edited May 23 '17 at 12:13

Community

1
1

answered Mar 10 '14 at 15:43

drew_w

10,320
4
28
49

@isherwood You are correct! I think that should do it now. – drew_w Mar 10 '14 at 15:46
@dubbs Should be fixed. Sorry about that! – drew_w Mar 10 '14 at 16:01
done. a nice solution, but the issue here is when using this on a fluid responsive approach, i am testing to check the window size on any change to the browser size which then re-does this script - therefore adds _small.jpg again... which breaks it... any way of only making it add _small.jpg if not already done so? – dubbs Mar 10 '14 at 16:02
@dubbs I added a function call to "endsWith" to make sure that the image source doesn't have "_small.jpg" already. Best of luck! – drew_w Mar 10 '14 at 16:07
@drew_w - thanks - but that doesnt seem to work... on resize, the script is still firing and adding _small to the JPEGs... – dubbs Mar 10 '14 at 16:41
@dubbs This should be really close. There could be an issue with upper versus lower case or something along those lines. Debug using your browser tools and I think you should be able to figure it out from there. Happy hunting! – drew_w Mar 10 '14 at 16:43
@drew_w - hmmm... something not right... any chance of a jfiddle example of it working? – dubbs Mar 10 '14 at 16:48
@drew_w - found it.... if (!endsWidth($(this).attr('src'), '_small.jpg')) { ... should be if (!endsWith($(this).attr('src'), '_small.jpg')) { – dubbs Mar 10 '14 at 16:50
@dubbs My bad! Have fixed the answer. Feel free to mark as correct if it works : ) – drew_w Mar 10 '14 at 17:08

jQuery append img src

3 Answers3

Linked