title: Using jQuery to change image src when browser is resized
body: <p>I have two different sized images, one if for screens smaller than 759px, the other is for screens larger than 759px. </p>
  
  <p>I have managed to get the source of the images to change when the document loads depending on the window width. But I really would like to be able to do this when the browser is resized as well but for the life of me I can't get it to do that, it only seems to work when the page is initially loaded.</p>
  
  <p>This is my code:</p>
  
  <pre><code>$(document).ready(function() {
      function imageresize() {
          var contentwidth = $(window).width();
          if ((contentwidth) &lt; '700'){
              $('.fluidimage').each(function(){
                  var thisImg = $(this);
                  var newSrc = thisImg.attr('src').replace('x2', 'x1');
                  thisImg.attr('src', newSrc);
              });
          } else {
              $('.fluidimage').each(function(){
                  var thisImg = $(this);
                  var newSrc = thisImg.attr('src').replace('x1', 'x2');
                  thisImg.attr('src', newSrc);
              });
          }
      }
  
      imageresize();//Triggers when document first loads
  
      $(window).bind("resize", function(){//Adjusts image when browser resized
          imageresize();
      });
   }); 
  </code></pre>