How to replace src of images in list using javascript (jquery)?

Question

I would like to replace thumbs to large in following example using js

FROM:

<ul id="slide">
<li><img src="pathtoimg/thumbs/imagename.jpg" /></li>
<li><img src="pathtoimg/thumbs/imagename2.jpg" /></li>
</ul>

To :

<ul id="slide">
<li><img src="pathtoimg/large/imagename.jpg" /></li>
<li><img src="pathtoimg/large/imagename2.jpg" /></li>
</ul>

To achieve it I used following js code

 $(window).load(function(){
 var images = $("#slide li img");
 for(var i = 0; i < images.length; i++)
{
var img = images[i];
var src = img.src.replace("thumbs","large");
img.src = src;
}
  });

The above code works fine in modern browsers but internet Explorer 7 & 8 returns stack overflow at line : 0 error. Is there any other way to replace the src of img in list without getting above error on ie?

Thanks in advance.

Silviu-Marian · Accepted Answer · 2012-07-24 15:45:42Z

5

Try it like this

$(document).ready(function(){

    $("#slide > li > img").each(function(){ 
        var t = $(this);
        var src = t.attr('src');
        if(!src || typeof(src)!=='string') return;
        t.attr('src',src.replace('/thumbs/','/large/'));
    }); 

});

edited Jul 24, 2012 at 15:45

answered Jul 24, 2012 at 15:22

Silviu-Marian

10.9k7 gold badges56 silver badges76 bronze badges

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

4 Comments

David Bélanger Over a year ago

I would suggest

$(document).ready(function(){ 	$("#slide > li > img").each(function(){ 		var b=$(this),a=b.attr("src"); 		a&&"string"===typeof a&&b.attr("src",a.replace("/thumbs/","/large/")) 	}) });

Kuldeep Daftary Over a year ago

Hi Thanks for your reply. I tried using your code on document.ready but it is still return stack overflow error in ie.

Kuldeep Daftary Over a year ago

@DavidBélanger I tried using your code too.. It still shows me Stackoverflow error ...

David Bélanger Over a year ago

@KuldeepDaftary Try this update:

$(document).ready(function(){ 	$("#slide > li > img").each(function(){ 		var b=$(this),a=b.attr("src"); 		a&&"string"===typeof a&&b.attr("src",a.replace(/thumbs/g,"large")) 	}) });

bugwheels94 · Accepted Answer · 2012-07-24 15:23:18Z

1

Try this

$(window).load(function(){
$("#slide li img").each(function(){
$(this).attr("src",$(this).attr("src").replace("thumbs","large"));
});
});

answered Jul 24, 2012 at 15:23

bugwheels94

32.2k3 gold badges43 silver badges62 bronze badges

Collectives™ on Stack Overflow

How to replace src of images in list using javascript (jquery)?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related