Javascript/Jquery rotation image qui redimensionne lorsque la fenêtre est redimensionnée

Question

Je ne peux pas obtenir ce travail, S'il vous plaît aider! . c'est le bordel. Ce que j'essaie de faire est de rendre cette image floue et d'en flouter une nouvelle en quelques secondes, et si la taille de la fenêtre est supérieure à une taille définie, elle utilisera une image plus grande. En outre, il doit vérifier si la fenêtre a été redimensionnée afin que je puisse changer l'image sur le pouce. donc je besoin de quelque chose comme ceci:

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

c'est le bit principal de code que j'ai des problèmes avec:

$(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); 
}); 
}); 

Answer 1

Tout d'abord, vous ne avez besoin d'une méthode .ready(). :)

Pour répondre à votre question, vous pouvez profiter de .resize() pour calculer la largeur de la fenêtre. Commencez simplement avec une variable qui contient la largeur, puis recalculez sur le redimensionnement. Par exemple:

$(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... 
    }); 
});