Question

Depending on a condition (screen resolution for example), I want the image src value to be changed for all images on a page. If possible, how do I achieve this with jQuery?

For example:

For resolutions above 1000(width), if my image src reads src=img/image1.jpg, how do I change this for a different resolution (say less than 1000 width) to src=’lower_img/image1.jpg’

(i.e. adding a prefix lower to image)

basically, I am maintaining two folders img and lower_img and images should be pulled from respective folders based on the resolution (image names are same in both folders)

note: I don’t need the screen resolution detection script, I’m only looking for the image src substitution part

Thanks in advance.

Answer 1

This will prepend the “lower_” text to all images on the page. You would just need to add this into your browser size detection code.

So, if browser has less than 1000 pixel width:

$('img').attr('src', function(index, source) {
     return 'lower_' + source;
});