0

I am using if (window.matchMedia().matches to swap some background images on an element depending on the screen resolution. When l resize the page the new (window.matchMedia().matches runs the code within the matchMedia but also continues to run the code from the original resolution.

What am l doing wrong? I have tried changing var names but to no avail.

var bar_restaurant_images = function () {

// IMAGES 4K    
    
  if (window.matchMedia("(max-width: 7680px) and (min-width: 3441px)  and (-webkit-max-device-pixel-ratio:1.0)").matches) {
    var imagesOfficers = ["officers-mess-section-4k.webp", "officers-mess-section-2-4k.webp", "officers-mess-section-3-4k.webp"];
    jQuery(function () {
      var i = 0;
      jQuery(".officers_mess_section_content_img_wrap").css("background-image", "url(https://officers-mess.co.uk/stage/wp-content/themes/vintclub-child/img/" + imagesOfficers[i] + ")");
      setInterval(function () {
        i++;
        if (i == imagesOfficers.length) {
          i = 0;
        }
        jQuery(".officers_mess_section_content_img_wrap").fadeOut("slow", function () {
          jQuery(this).css("background-image", "url(https://officers-mess.co.uk/stage/wp-content/themes/vintclub-child/img/" + imagesOfficers[i] + ")");
          jQuery(this).fadeIn("slow");
        });
      }, 10000);
    });   

}

else if (window.matchMedia("(max-width: 2560px) and (min-width: 1921px) and (-webkit-max-device-pixel-ratio:1.0)").matches) {

        var imagesOfficers2560 = ["officers-mess-section-2560.webp", "officers-mess-section-2-2560.webp", "officers-mess-section-3-2560.webp"];
    jQuery(function () {
      var i2560 = 0;
      jQuery(".officers_mess_section_content_img_wrap").css("background-image", "url(https://officers-mess.co.uk/stage/wp-content/themes/vintclub-child/img/" + imagesOfficers2560[i2560] + ")");
      setInterval(function () {
        i2560++;
        if (i2560 == imagesOfficers2560.length) {
          i2560 = 0;
        }
        jQuery(".officers_mess_section_content_img_wrap").fadeOut("slow", function () {
          jQuery(this).css("background-image", "url(https://officers-mess.co.uk/stage/wp-content/themes/vintclub-child/img/" + imagesOfficers2560[i2560] + ")");
          jQuery(this).fadeIn("slow");
        });
      }, 10000);
    });   

}


};

jQuery(window).on('resize', bar_restaurant_images);
bar_restaurant_images();
overcaffeinated
  • 53
  • 5
  • Not sure what's the issue in that particular code, but one thing that's wrong with it is that you shouldn't need to listen for "resize" at all. The [MediaQueryList](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList) object returned by `matchMedia()` does fire a "change" event when its state changes. Listen to that only. – Kaiido Oct 24 '22 at 12:08
  • If l comment this "jQuery(window).on('resize', bar_restaurant_images);" out when l resize the page it doesn't load any of the code of the other matchMedia. With it enabled it matches the other media BUT is still continues to run code of the previous matchMedia as well. :( – overcaffeinated Oct 24 '22 at 16:01

0 Answers0