Replace image file name by jquery

Question

I have find related answer but not same like this topic, so i asked this question.

My question is, i'm trying to replace image file name default.jpg to hqdefault.jpg from all images below, I'm unable to change image links manually, so i have to change it by jquery.

Images

<div id="selector">
    <img src="http://img.youtube.com/vi/qDc_5zpBj7s/default.jpg">
    <img src="http://img.youtube.com/vi/ss7EJ-PW2Uk/default.jpg">
    <img src="http://img.youtube.com/vi/ktd4_rCHTNI/default.jpg">
    <img src="http://img.youtube.com/vi/0GTXMEPDpps/default.jpg">
</div>

JS i'v tried

$('#selector img').attr('src',function(i,e){
    return e.replace("default.jpg","hqdefault.jpg");
});

Problem is it change(remove) whole links to hqdefault.jpg, but i want to change only default.jpg to hqdefault.jpg from all/any image src.

How to replace all image file name simply?

Example

<img src="http://img.youtube.com/vi/qDc_5zpBj7s/default.jpg">
to
<img src="http://img.youtube.com/vi/qDc_5zpBj7s/hqdefault.jpg">

Don't use full image link on js, because video generate image links/id dynamically, just replace default.jpg to hqdefault.jpg by jquery.

You missed id attribute. <div="selector"> should be <div id="selector"> — Ibrahim Khan
– Ibrahim Khan, Commented Nov 28, 2015 at 13:24
@Azim ok, but, i'm using LaxyLoad XT plugin so result become like this: hqhqhqdefault.jpg . any way to fix this? — Aariba
– Aariba, Commented Nov 28, 2015 at 13:26

Fisherman · Accepted Answer · 2015-11-28 12:43:43Z

5

try this

$('#selector img').attr('src',function(i,e){
    return $(this).attr('src').replace("default.jpg","hqdefault.jpg");
});

answered Nov 28, 2015 at 12:43

Fisherman

6,1311 gold badge33 silver badges37 bronze badges

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

Comments

surabhivin · Accepted Answer · 2015-11-28 13:02:35Z

2

You can also try this:

$('#selector img').on({
        'click': function(){
          var src1 = $(this).attr("src"); 
          var path = src1.substring(0,src1.lastIndexOf('/'));
          var new_source=path+'/'+'hqdefault.jpg';
            $(this).attr('src',new_source);
        }
    });

edited Nov 28, 2015 at 13:02

answered Nov 28, 2015 at 12:49

surabhivin

1396 bronze badges

2 Comments

Aariba Over a year ago

Hi, thanks, but, i'm unable to add any links on JS, want solution for only replace default.jpg without give full link on JS.

surabhivin Over a year ago

Hello ,I have made changes in my answer...try it

Ibrahim Khan · Accepted Answer · 2015-11-28 17:37:12Z

1

You should use each function to iterate through all img. Following code snippet may help you.

$('#selector img').each(function(){
    var src = $(this).attr('src').replace("default.jpg","hqdefault.jpg");
    $(this).attr('src', src);
});

Update:
If you are using LazyLoad XT plugin then do the same in it's onload event like following.

$.lazyLoadXT.onload=function(){
      var src = $(this).attr('src').replace("default.jpg","hqdefault.jpg");
      $(this).attr('src', src);
 }

edited Nov 28, 2015 at 17:37

answered Nov 28, 2015 at 13:17

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

1 Comment

Aariba Over a year ago

hi i'm using LaxyLoad XT plugin so result become like this: hqhqhqdefault.jpg . any way to fix this?

Collectives™ on Stack Overflow

Replace image file name by jquery

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related