I have some image thumb code like below on my website coming from third party website to my website
<div class="thumb"><img src="//www.abc.com/website/thumbs/461/beautifulimage/test1a.jpg" rel="//www.abc.com/website/thumbs/461/beautifulimage/test1a.jpg"></div>
I want to replace URL from
//www.abc.com/website/thumbs/461
to
//www.abc.com/website/thumbs/800
So, How I can replace URL on page load so it'll load code something like below
<div class="thumb"><img src="//www.abc.com/website/thumbs/800/beautifulimage/test1a.jpg" rel="//www.abc.com/website/thumbs/800/beautifulimage/test1a.jpg"></div>
Is there any way where I can call URL like this?
I assume it is matter of changing 461
to 800
in Image thumbnail URL. This can be solved easily with jQuery. Just iterate over all the thumbnail images and replace /461/
with /800/
.
This has to be done after document is ready, and this is how you can do it.
$(document).ready(function(e){
$('.thumb img').each(function(index){
var urlpath=$(this).attr('src');
urlpath=urlpath.replace("/461/", "/800/");
$(this).attr('src',urlpath);
});
});
Demo: https://jsfiddle.net/
We have used each() jQuery function iterate over all the thumbnail images and used attr() jQuery function for setting and getting the src
of image element.