Replace Text In Background Image URL

Question

Simplified, I have this structure:

<div id="RelatedPosts1">
    <div class="related-posts-thumb" style="background: url(http://xxxxxxx/s72-c/image-1.jpg)"></div>
    <div class="related-posts-thumb" style="background: url(http://xxxxxxx/s72-c/image-2.jpg)"></div>
    <div class="related-posts-thumb" style="background: url(http://xxxxxxx/s72-c/image-3.jpg)"></div>
</div>

I wish to replace the "s72-c" with "s320". Thus, changing the size of the image.

This is what I tried with jQuery:

<!-- Let's replace low-res with a higher-res -->
$(".related-posts-thumb").text(function () {
    return $(this).text().replace("s72-c", "s320"); 
});

I'm guessing this didn't work because the image URL isn't "inside" the element. So I'm not sure how to achieve my desired effect. I'm not a javascript/jQuery expert and I haven't seen any examples addressing anything similar to what I'm trying to do.

If you could provide the actual links to some example images that would help. I think I can help you do this but I need example images of each size to create an example to show you — Christopher White
– Christopher White, Commented Nov 26, 2014 at 0:06

Colin Schoen · Accepted Answer · 2014-11-26 00:29:34Z

1

Not really sure when you want this to trigger, so I'll just make this an on click...

 $('.related-posts-thumb').each(function() {
     $(this).attr("style", $(this).attr("style").replace("s72-c", "s320"));
 });

JSFiddle example (click on the background):

http://jsfiddle.net/wdc6ydtk/1/

edited Nov 26, 2014 at 0:29

answered Nov 26, 2014 at 0:09

Colin Schoen

2,5881 gold badge20 silver badges26 bronze badges

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

6 Comments

Christopher White Over a year ago

This works? That's awesome. I didn't realize you could treat the entire style of an element as a string. If you can provide an example you get a +1 from me :)

Xarcell Over a year ago

A click even isn't what I was looking for. I tried to solve the issue though using your example and I still couldn't quite get it.

Colin Schoen Over a year ago

This example should work fine have a look at the jsfiddle @Xarcell

Xarcell Over a year ago

This is what I used from your example to get it to work: jsfiddle.net/wdc6ydtk/2 If you update your answer I will accept it, assuming that "text" is correct way to do this.

Colin Schoen Over a year ago

@Xarcell Sure, I just used .html, but that should have the same effect. On load it will change the image. I have updated my answer.

|

Gabriele Petrioli · Accepted Answer · 2014-11-26 00:30:39Z

1

You could use the .css() method with the function parameter option

$('.related-posts-thumb').css("background-image",function(idx,current){
    return current.replace('s72-c','s320');         
 });

answered Nov 26, 2014 at 0:30

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Collectives™ on Stack Overflow

Replace Text In Background Image URL

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related