Disable Lightbox on Small Screens

Hey guys,

I need your help to disable the prettyphoto lightbox if the width of the window is smaller than 768px.

With this code when the window is smaller I can disable the lightbox, but when I make it bigger I don’t know how to make the lightbox work again.

$(window).resize(function () {
    if ( $(window).width() <= 767 ) {
        $('a[rel^="lightbox"]').unbind('click').on('click', function (event) {
            event.preventDefault();
        });
    } else {
        $('a[rel^="lightbox"]').bind('click');
    }
});

Thanks

Hello,

I know it’s probably an outdated post, but here is my solution for mobile devices & colorbox. Maybe it gets handy for someone else.

(function ($){

    $(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);

See how the mobile_colorbox is called on page load and then again on window resize.

sorry, i don’t see where it ” is called on page load ”.

right after $(function (){

there is a function call $mobile_colorbox();

$(function (){}) is a default jquery function that awaits all dom to be loaded.

akoola said
sorry, i don’t see where it ” is called on page load ”.

got it, thx