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
– Jonas Grumann, Commented Mar 10, 2014 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
– dubbs, Commented Mar 10, 2014 at 17:17

tymeJV · Accepted Answer · 2014-03-10 15:41:54Z

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, 2014 at 15:41

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anton Over a year ago

You don't need to iterate through the images, $('div.banners img').attr should be enough jsfiddle.net/Alfie/SrH8X

Community · Accepted Answer · 2017-05-23 12:13:10Z

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, 2017 at 12:13

CommunityBot

11 silver badge

answered Mar 10, 2014 at 15:43

drew_w

10.5k4 gold badges33 silver badges50 bronze badges

9 Comments

drew_w Over a year ago

@isherwood You are correct! I think that should do it now.

drew_w Over a year ago

@dubbs Should be fixed. Sorry about that!

dubbs Over a year ago

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?

drew_w Over a year ago

@dubbs I added a function call to "endsWith" to make sure that the image source doesn't have "_small.jpg" already. Best of luck!

dubbs Over a year ago

@drew_w - thanks - but that doesnt seem to work... on resize, the script is still firing and adding _small to the JPEGs...

|

hsz · Accepted Answer · 2014-03-10 15:42:32Z

0

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);

answered Mar 10, 2014 at 15:42

hsz

153k63 gold badges269 silver badges320 bronze badges

Collectives™ on Stack Overflow

jQuery append img src

3 Answers 3

1 Comment

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related