0

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:

$(window).resize(function(){
change size
});

this is the main bit of code that i'm having troubles with:

$(document).ready(function() {

var index = 1;

function rotateImage()
{
  $('.dp1').fadeOut('slow', function()
  {
if($(window).width() > 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);
});
});
James Norton
  • 33
  • 2

1 Answers1

1

First, you only need one .ready() method. :)

To address your question, you can take advantage of .resize() to calculate the window width. Just start with a variable that contains the width, and then recalculate on resize. For example:

$(document).ready(function () {
  var index = 1,
      width = $(window).width(); // SET THE WIDTH ON DOCUMENT READY

  function rotateImage () {
    //...
    if(width > 1312){ // USE THE "width" variable here in this comparison
    //...
  }

  //SET THE "width" variable on window resize
  $(window).resize(function(){
    width = $(this).width();
    //... RESIZE OR CHANGE OUT IMAGES HERE...
  });
});
Matthew Blancarte
  • 8,251
  • 2
  • 25
  • 34
  • thanks heaps! but i still don't understand how to get it to change the image when the window has been re-sized. – James Norton Apr 16 '13 at 06:08
  • Happy to help, @JamesNorton . If it were me, I would just use a large image and then css to stretch the image to the container. That way you aren't loading different image sizes... And you don't have to use any of this code to rotate the image size. [See this thread.](http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only) – Matthew Blancarte Apr 16 '13 at 06:46
  • unfortunately the way my layout is, and the way i had coded it, i can't do it that way :( there are 3 images side by side which make up a banner that spans 100% of the page and each one changes to another picture. So css doesn't quite cut it for this, since the container can go from being small to being massive. – James Norton Apr 16 '13 at 07:06
  • It's hard for me to visualize that. Any chance you could link me to an example? – Matthew Blancarte Apr 16 '13 at 07:07