Add and remove jQuery plugin on window resize

Question

I'm trying to add a jQuery plugin only when the screen size is 1200px or larger.

I want it to function on window load and resize, but i can't get it to work properly, i want it to work like a css media query, checking the window size on every resize and applying the changes, in this case the plugin.

JSFiddle

$(window).on('load resize', function() {
if (window.matchMedia("(min-width: 1200px)").matches) {
    $('.zoom').zoom(); 
  }; 
});

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.zoom {
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  width: 90%;
}

.zoom img {
  width: 70%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.20/jquery.zoom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=center>
<div class="zoom"><img src="https://www.aussiespecialist.com/content/asp/en_sg/sales-resources/image-and-video-galleries/jcr:content/mainParsys/hero/image.adapt.1663.medium.jpg"></div>
</div>

Answer 1

I would get the screen width using jQuery and run an if statement to execute your code. I normally nest the $(window).resize() event within the $(document).ready() event. See code below! Hope it helps...

$(document).ready(function(){
        enableZoom();
    $(window).resize(function(){
        enableZoom();
    });
});
function enableZoom(){
    var screen_width = $(window).width();
    if (screen_width > 1200){
        $('.zoom').zoom();
    }else if (screen_width <= 1200){
        $('.zoom').trigger('zoom.destroy');      
    } 
}