Check Screen Size and Do Something if equal or greater than 768px

Question

I am creating a website for a university. I am trying to create a line of javascript that checks for screen size and if the screen size is greater than or equal to 768, I want it to open my images in a color box, which is defined in the university's template. Otherwise, if the screen size is less than 768, I want it to do nothing.

Currently it is just doing nothing, no matter what screen size...

$(document).ready(function() {
    function checkWidth() {
        var windowSize = $(window).width();
        if (windowSize >= 768) {
            WDN.initializePlugin('modal', [function() {
            var $ = require('jquery');
                $(".group2").colorbox({rel:'group2', transition:"fade"});
            }]);
        }
    }
    checkWidth();
    $(window).resize(checkWidth);
});​

Answer 1

And I'm seeing you're requiring jQuery only after the if condition. So, $(document).ready() will throw an error

Move the jquery import to the top

Condition should be

if (windowSize >= 768) {}