Replace image link with jQuery

Question

I have an image in a element with an light box image that shows on hover. I want to replace the image in the element with the light box image. My content is matched dynamically, and I cant change the html.

All of my images url ends with /250/250 - and SOME of the lighbox images ends with /400/300 - and I use the script below to replace them:

$('.new-structure .image a img').each(function () {
var src = $(this).attr('src');
$(this).attr('src', src.replace("/250/250", "/400/300"));
});

But some of the light box images has another ending that I cant make the script work for. They look something like this:

/img/0~BC6F034B-3404-4FBA-B26A-9B2990552E72~400~300~1

how do I match the image with the ending of /250/250 with the ones ending with 400~300~1?

Update: Main problem: When I replace 250/250 for 300/400 I don't need to change the full link - they are the same except the ending - when replacing for the ~400~300~1 image i need to swap the full link since its different.

I need to replace this:

 https://mywebsite.com/imgs/2d873287-7eb5-497a-a813-aef655acdb74/250/250

with this:

 https://mywebsite.com/img/0~3B07CED6-08FF-47CD-9D25-D908774F728D~400~300~1

Based on the ending in the url reffering to the image size: /250/250 and ~400~300~1

Update: realized it might be easier to just swap them based on their element classes..

The lightbox image looks like this:

<a class="mainColorbox" href="/img/0~676B9DBB-5D93-4481-B241-74B619F96188~400~300~1"></a>

The target image:

<div class="mainPicture">
<img src="/imgs/7fb6d7bd-b9e7-44b2-a533-a485b93456ac/250/250" class="photo">

I did - the light box images all ends on either /400/300 or ~400~300~1. the static image in the target container all ends on /250/250. — Xeptor
– Xeptor, Commented Nov 25, 2015 at 9:37
I'm not sure I get what you mean by "matching" in this case. Can you not just replace the "/400/300" with "400~300~1" in the replace method? — Jacob
– Jacob, Commented Nov 25, 2015 at 9:39
@shapoglyk I think the problem is he want to transfer the link from /250/250 to 400/300 or to 400~300~1 but he's not sure which is the correct one. — Roger Dwan
– Roger Dwan, Commented Nov 25, 2015 at 9:43
I already transfer the link when its the light box image has /400/300 - its easy because they have the same file structure. but when I encounter a ~400~300~1 image I need to swap the full link - but the links are not consistent more then ending so that's what I need to target. Updated my question. — Xeptor
– Xeptor, Commented Nov 25, 2015 at 9:49

Community · Accepted Answer · 2017-05-23 11:51:58Z

1

User a Regex code to replace the strings:

var str = 'some // slashes', replacement = '';
var replaced = str.replace(/\//g, replacement);

Otherwise the slashes will be encoded like in your example.

Find out more here: How to globally replace a forward slash in a JavaScript string?

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Nov 25, 2015 at 10:33

Tobias Schäfer

1,3683 gold badges17 silver badges39 bronze badges

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

Collectives™ on Stack Overflow

Replace image link with jQuery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related