333 posts
  • Has referred 100+ members
  • Has sold $10,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 50+ items on Envato Market
+5 more
vtimbuc says

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

10 posts
  • Has referred 50+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
templatestock says

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.

2 posts
  • Has been part of the Envato Community for over 2 years
akoola says

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

10 posts
  • Has referred 50+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
templatestock says

right after $(function (){

there is a function call $mobile_colorbox();

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


sorry, i don’t see where it ” is called on page load ”.
2 posts
  • Has been part of the Envato Community for over 2 years
akoola says

got it, thx

1 post
  • Has been part of the Envato Community for over 3 years
  • Has collected 10+ items on Envato Market
  • Located in United States
csborgman says

“Maybe it gets handy for someone else.”

Hello Templatestock! YES!!! I need your help please…. I first saw this script on your website http://www.templatestock.net/disable-colorbox-on-mobile-devices-tablets/ and now here. I’ve been looking for this solution but I’m not a programmer and I don’t know how to implement the script… so frustrating!!

I was trying to figure out how to add php-mobile-detect http://code.google.com/p/php-mobile-detect/ to Colorbox but maybe your fix will work using the width. Is there a way to add the Mobile_Detect.php file to your fix? Sorry, I’m code stupid except for a some basic CSS.

If you charge a fee please let me know, your time is valuable.

Thank you! Chris

10 posts
  • Has referred 50+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
templatestock says

Hello Chris,

this can be done with php mobile detect yes, here is a simple example on how it should work:

http://jsfiddle.net/DRaaa/

you can all pack it in mobile-detection.js.php and include it as a script on your site.

by
by
by
by
by
by