Replace img src with js jquery

Question

I have a newsfeed in my CMS that pulls preview images as well as teaser text for the feed. The images are all thumbnails @ 75x75px. I wanted to have the preview images much larger, but cannot scale an image that small.

I'm wondering what JS I need to run to replace all the URL's to the original image src.

Have:

Need to change them all to the below - which is just replacing 'thumb' with 'large':

This needs to apply to a whole css class; as it is a newsfeed & there will be new articles

Here's where I'm at:

function replaceImgSrc(img,imgTwo) {
var arr=[img,imgTwo];
for(i=0;i<arr.length;i++) 
    arr[i].each(
        function(i,e) {
            theImg=$(this),
            theImg.attr("src", 
                function(i,e) {
                    return e.replace("_thumb","_large")
                }
            )
        }
    )
}

That's what I'm wondering...ha. I have to add the JS into a coding element in the CMS and use <script> </script> and it doesn't end up changing the url. — Tom Calahan
– Tom Calahan, Commented Jan 20, 2017 at 5:40

MickRip · Accepted Answer · 2017-01-21 06:59:06Z

2

If the newsfeed is wrapped in a class, try this way.

function replaceImg($class) {
    $class.find("img").each(function(k, el) {
        var newSrc = $(el).attr("src").replace("_thumb", "_large");
        $(el).attr("src", newSrc);
    });
}

replaceImg($("#newsfeed"));

And in your HTML, wrap the newsfeed code inside an identifiable DIV.

<div id="newsfeed"> {{place newsfeed code in here}} </div>

edited Jan 21, 2017 at 6:59

answered Jan 19, 2017 at 5:57

MickRip

3921 gold badge3 silver badges10 bronze badges

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

2 Comments

Tom Calahan Over a year ago

This seems really close. Here's the class string: '.expanded .newsItemHeader > a img' Maybe you can help if I put it in reference: prepforce.com.prod.sportngin.com/contact

MickRip Over a year ago

Instead of replaceImg($(".your-newsfeed-class")); change the selector inside that call to .expanded. Or alternatively, within your HTML, wrap the newsfeed widget inside something like <div id="newsfeed">, and then call the function with $("#newsfeed") Doing it that way might be easiest and most failsafe - and I've changed my answer to reflect this.

Bharatsing Parmar · Accepted Answer · 2017-01-19 05:36:57Z

1

Try this fiddle jsfiddle.net/bharatsing/wkh6da93/

This will find all images in page and change its src with large image.

$(document).ready(function(){           
    $("#btnLarge").click(function(){
    $("img").each(function(){
        var src=$(this).attr("src");
      src=src.replace("_thumb","_large");
      var src=$(this).attr("src",src);
    });
    });
});

answered Jan 19, 2017 at 5:36

Bharatsing Parmar

2,4551 gold badge11 silver badges18 bronze badges

Comments

hackerrdave · Accepted Answer · 2017-01-19 05:36:48Z

0

If the assumption is that you have all img elements in an array var imgArray, then you can iterate thru them and update the src attribute like this:

imgArray.forEach(enlargeImageSrc);

function enlargeImageSrc (image) {
  image.src = image.src.replace('_thumb', '_large');
}

answered Jan 19, 2017 at 5:36

hackerrdave

6,7362 gold badges27 silver badges29 bronze badges

Comments

ab29007 · Accepted Answer · 2017-01-19 05:38:40Z

Try this hovering over the button will make the images with class="show" bigger, as soon as you remove the mouse they are small again.

$("button").mouseenter(function (){
  var srcI = $(".show").attr("src");
  srcI = srcI.replace("thumb","large");
  $(".show").attr("src",srcI);
});
$("button").mouseleave(function (){
  var srcI = $(".show").attr("src");
  srcI = srcI.replace("large","thumb");
  $(".show").attr("src",srcI);
});

button{
  display:block;
}
img.show{
  max-width:400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <button>Click me</button>
  <img class="show" src="http://cdn4.sportngin.com/attachments/news_article/7560/0742/Screen_Shot_2017-01-04_at_11.30.31_AM_thumb.png"/>
</div>

Arsh Kalsi · Accepted Answer · 2017-01-19 05:50:14Z

I make a code for you where I take two variables one for large image URL and one for small image URL. I create a function on click on change image button your image url change to big image and it show you big image and then you again click on that button it change big image to small image. You can also see the live demo of this here https://jsfiddle.net/Arsh_kalsi01/3s1uudhe/2/

 

   $(document).ready(function(){
var big_image = "http://cdn4.sportngin.com/attachments/news_article/7560/0742/Screen_Shot_2017-01-04_at_11.30.31_AM_large.png";

var small_image = "http://cdn4.sportngin.com/attachments/news_article/7560/0742/Screen_Shot_2017-01-04_at_11.30.31_AM_thumb.png";


	$(document).on("click",".Changeimagetolarge",function(){
  var obj = $(this);
  	obj.removeClass('Changeimagetolarge');
    obj.addClass('Changeimagetosmall');
  	obj.next("img").attr('src',big_image);
  });
  
  
  $(document).on("click",".Changeimagetosmall",function(){
    var obj2 = $(this);
  	obj2.removeClass('Changeimagetosmall');
    obj2.addClass('Changeimagetolarge');
  	obj2.next("img").attr('src',small_image);
  });
  
  
  
  
  
});

<script
			  src="https://code.jquery.com/jquery-3.1.1.min.js"
			  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
			  crossorigin="anonymous"></script>
<div>

<button class="Changeimagetolarge">
Change Image
</button>
<img src="http://cdn4.sportngin.com/attachments/news_article/7560/0742/Screen_Shot_2017-01-04_at_11.30.31_AM_thumb.png">

</div>

Thanks for the input - however - all I am looking to do is replace the url src address so that the 'large' image is called.

Collectives™ on Stack Overflow

Replace img src with js jquery

5 Answers 5

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related