Change image source based on viewport width

Question

<script type="text/javascript">
  $(window).resize(function(){
  var width = $(window).width(); 

   if (width < 361) {
      $(".infograph-image").attr("src","/images/infographicHowMobile.png");
   }
 }); 
</script>

I wish to change the image source of a given image, based on the viewport width size. If the viewport width size is 360 or less, change to a mobile version of the image.

I have two simple questions:

1) How can we do both: a) detect windows resize AND document ready ?

This, I believe I got:

I need to change that into a function. Then call it on load;

checkResponsive();

Then bind a event listener:

$(window).resize(checkResponsive);

2) We have several images that need to have a mobile version, should this be converted to a function ? Or several ifs may work ?

Can you please give me a kick-off start on those two questions please.

@prashanth: window.resize is that I have on the code sample posted. Media queries, is there a way to change the img src using media queries ? — MEM, Oct 08 '12 at 15:18
see the answers in http://stackoverflow.com/q/2676436/441860 — prashanth, Oct 08 '12 at 15:25
I would say use media queries. also if you want you can do something like this also : http://jquerypicture.com/ it is a great plugin, just resize the window and you will understand it. I hope it helps\ — Dhruvenkumar Shah, Oct 08 '12 at 15:27
@prashanth thanks a lot for your answer. However, that will not work. I'm totally aware of background image change using css, but that's not the case here. — MEM, Oct 08 '12 at 15:27
@DhruvenkumarShah How the hell could media queries do the job here without javascript on the way ? Please, read my question properly and if in doubt I will do my best to clarify it. — MEM, Oct 08 '12 at 15:29
@MEM my bad, but I think jquerypicture should do the trick. I think I gave answer about how to accommodate the same html code on smartphones and tablets for media queries but for resize event the plugin should do the trick — Dhruvenkumar Shah, Oct 08 '12 at 15:32
@DhruvenkumarShah thanks. I have tried the script and, for some reason, I was unable to get the image to display inside my figure element. I was obviously missing something but I didn't get. I end up using another script that does the work much better then I would ever do. response.js — MEM, Oct 08 '12 at 17:30

score 1 · Accepted Answer · answered Oct 08 '12 at 15:30

1

Create a seperate function and call them on both events. So, for example, create the function mobileImg() like this:

function mobileImg(targetClass, imageSrc) {
    var width = window.innerWidth; // No need for jQuery here, raw JS can do this

    if(width < 361) {
        $(targetClass).attr("src", imageSrc);
    }
}

And then call this on both events.

$(document).ready(mobileImg(".infograph-image", "/images/infographicHowMobile.png"));
$(window).resize(mobileImg(".infograph-image", "/images/infographicHowMobile.png"));

You can then call the mobileImg method as much as you want and with whatever params. If you really want to make it clean, also add a check if the passed element and image exist at all and use fallbacks where needed.

answered Oct 08 '12 at 15:30

Oldskool

34,211
7
53
66

I'm not getting this. If I have infographicHowMobile and infographicAboutMobile and infographicOtherImageMobile and infographicYetAnotherImageMobile, I need to call 8 times document.ready and window.resize ? :s – MEM Oct 08 '12 at 15:38
@MEM No, you would stack them in 1 call. Like: `$(document).ready(mobileImg(".class1", "img1"); mobileImg(".class2", "img2"));` and so on... Or pass targetClass/imageSrc as arrays to the function and loop over all of them. – Oldskool Oct 08 '12 at 15:41
1

@Oldskook - thanks a lot, I end up using the following very VERY nice script that does the job the same way I wished to have been done: http://responsejs.com/ – MEM Oct 08 '12 at 17:28

Change image source based on viewport width

1 Answers1

Linked