title: Change Maximage jquery background image depending on device resolution
body: <p>New to jquery so bear with me if my attempts seems a little lame. </p>
  
  <p>Using the Maximage jquery plugin (<a href="http://www.aaronvanderzwan.com/maximage/" rel="nofollow">http://www.aaronvanderzwan.com/maximage/</a>) I added a full screen background to my homepage, all well and good. But ideally I needed to change the resolution of the images selected depending upon the device resolution in a way which would be compliant with older browsers. Is there a way to do this, or am I stuck with the resolution the images are first set? I tried the following:</p>
  
  <pre><code>&lt;div id="maximage" class="mc-cycle"&gt;
  
      &lt;div class="mc-image"&gt;
            &lt;img src="images/small/property1.jpg" /&gt;
      &lt;/div&gt;
  
      &lt;div class="mc-image"&gt;
            &lt;img src="images/small/property2.jpg" /&gt;
      &lt;/div&gt;
  
      &lt;div class="mc-image"&gt;
            &lt;img src="images/small/property3.jpg" /&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>When maximage runs, it strips out the image tags and applies the original image path as a background image instead. I tried to change this like so...</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      var winheight = $(window).height();
      var winwidth = $(window).width();
      var previousWinSetting = 700; //low res image starter
  
      function changeImgPath(pathTweak){
          var imgDivArray = $('div.mc-image');
          for(var i=0; i&lt;imgDivArray.length; i++){
              var selectedSrc = $("div.mc-image").css('background-image');     
              var splitSrc = selectedSrc.split('/');
              splitSrc[splitSrc.length-1] = splitSrc[splitSrc.length-1].slice(0,-1); //Trim last character ")"
              var newSrc = "properties/"+pathTweak+"/"+splitSrc[splitSrc.length-1];
              alert(newSrc);
              $("div.mc-image").css("background-image", "url("+newSrc+")");
          }
      }
  
  //refresh on resize
      $(window).resize(function() {
          if ($(window).width() &gt; previousWinSetting &amp;&amp; $(window).width() &gt;= 640  &amp;&amp; $(window).width() &lt; 1010) {
              changeImgPath("medium");
              previousWinSetting = 1000;   
          }
  
          if ($(window).width() &gt; previousWinSetting &amp;&amp; $(window).width() &gt;= 1010) {
              changeImgPath("full");
              previousWinSetting = 5000;
          }
      });
  
      $(function() { //Change path when document ready
          if ((window).width() &lt; 1010 &amp;&amp; (window).width() &gt;750){
              changeImgPath("medium"); previousWinSetting = 1000;
          } else if ((window).width() &gt;= 1010) {
          changeImgPath("full"); previousWinSetting = 5000;
          }
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>At the moment each div.mc-image has its background set to match the first .mc-image instance (property1.jpg). While I'm sure that's to do with my loop (maybe change $("div.mc-image") to imgDivArray[i]), the bigger concern is the fact by changing the background image-path it seems to switch off the maximage functionality. Images immediately stopped being scaled to fill the screen.</p>
  
  <p>Any help or pointers would be greatly appreciated, thanks for reading.</p>