javascript - enable a plugin if width is greater than 767px?

Question

I am trying to write some javascript/jquery that will allow me to enable a slideshow plugin if the viewport width is greater than 767px.

If it is less than said value, it should simply display a background image in the body and disable the plugin

Currently i cannot get the plugin to display when the width is > 767px but the background image does show when less

any help would be appreciated

CODE:

$(window).on('resize', function() {
           if($(this).width() < 767) {
               $("body").addClass("backgroundImage");
               $("#example, body").vegas();
               window.location.reload();

           } else {
               $("body").removeClass("backgroundImage");
               $("#example, body").vegas({
            delay:10000,
            transition: 'fade',
            cover: true,
            align: 'center',
            valign: 'center',
            preload: true,
            preloadImage: true,
            slides: [
                {src: "img/slideshow/img1wB-E.jpg"},
                {src: "img/slideshow/img2-2.jpg"}
            ]
        });
               window.location.reload();
               return;

           }

        }).trigger('resize');

Answer 1

Why not just create a CSS entry with the min-width 767, so if its below that, it wouldn't show up.

@media (min-width: 767px) {
    .specialSlideshow {
      width: 750px; } 
    }
@media (min-width: 0px) {
    .specialSlideshow {
      display:none; } 
    }

So, you could potentially wrap a div with class specialSlideshow around your slideshow code, if its below 767px, it wont show.

Answer 2

Did you include

 <link rel="stylesheet" href="/js/vegas/vegas.min.css"> <script src="/js/vegas/vegas.min.js"></script> 

in the .html?

And did you mean to delay it by 10 secs?