Désactiver jQuery Colorbox sur mobile

Colorbox est une lightbox légère et classe, mais sur mobile le rendu n’est pas forcément génial: pas de zoom possible, problèmes de centrage…

Voici un bout de script jQuery pour désactiver Colorbox si la résolution d’écran est inférieure à 768 pixels:

(function ($){

    $(document).ready(function (){

        /* Disable Colorbox on mobile devices */

        $mobile_colorbox();

        $(window).resize(function () {
            $mobile_colorbox()
        });

    });

    $mobile_colorbox = function ()
    {
        if ( $(window).width() <= 767 ) {
            $('.colorbox').colorbox.remove();
        } else {
            $('.colorbox').colorbox({rel:'colorbox'});
        }            
    }

})(jQuery);

Insérez ce code après l’inclusion de Colorbox.

Ce code est encapsulé afin d’être utilisé sans soucis avec d’autres librairies JS.

Crédits: TemplateStock.