title: Javascript/Jquery rotating image that re-sizes when window is resized
body: <p>i can not get this to work, Please help! . it's a mess. What i am trying to do is, make this image blur out and blur a new one in ever few seconds, and if the window size is greater than a defined size, it will use a larger image. Also it needs to check if the window has been re-sized so i can change the image on the go. so i will need something like this:</p>
  
  <pre><code>$(window).resize(function(){
  change size
  });
  </code></pre>
  
  <p>this is the main bit of code that i'm having troubles with:</p>
  
  <pre><code>$(document).ready(function() {
  
  var index = 1;
  
  function rotateImage()
  {
    $('.dp1').fadeOut('slow', function()
    {
  if($(window).width() &gt; 1312 ) {
      $('.dp1').css({'background-image' : 'url(../img/display_banner' + index + '.jpg)'});
  }
  else {
      $('.dp1').css({'background-image' : 'url(../img/display_banner' + index + '_big.jpg)'});    
  }
  
      $(this).fadeIn('slow', function()
      {
        if (index == images.length-1)
        {
          index = 0;
        }
        else
        {
          index++;
        }
      });
    });
  }
  
  $(document).ready(function()
  {
    setInterval (rotateImage, 4000);
  });
  });
  </code></pre>