Disable Colorbox for mobile browsers (small screens) using matchMedia and max-device-width

Have you find something... i'm looking for something like that too.

I was just looking for a solution for this, except it seems that the Colorbox popups works fine on a mobile browser and shrinks the width for smaller viewports.

Anyone know of a way t resolve this? Some jQuery or something? I really don't want to hack colorbox just to fix this (though if I do, I'll certainly post a patch). I've got a slideshow that really does not work well at all on mobile. See http://davidwalkerinteriors.com

@seanr: it looks like you may have fixed the problem on the site you provided. How did you do this? Can you provide a basic walkthru?

@nodecode: I disabled the slideshow autoplay, but that still doesn't solve the other problem which is that it is nearly impossible to close the colorbox once it opens. I still very much need a solution for this.

I'm also looking for a way to disable colorbox on small screens - I'm doing an image slideshow and when the images are at 100% width on a mobile screen, clicking to bring up a colorbox shows a *smaller* image than the original (because of the borders and colorbox controls). It is functional from a technical standpoint, but a dumb user experience.

I haven't run into seanr's issue (#6) but UI issues on small screens seem inevitable and it would be great to be able to turn off colorbox when it's not a good fit for the screen/browser.

Ideas:

• Some sort of admin control to include a media query around the calling of the colorbox module during page load. This would be awesome but probably a lot of work!
• A total hack (probably in the js itself) to surround the important part of the script (the part that actually... makes it go [can you tell I don't do much js]) in matchMedia or another js equivalent to check the screen size. This isn't ideal (boo hacking modules) but I'd take it in a pinch if I knew where to put the code in.
• An additional JS call (in custom theme js, maybe?), wrapped in a matchMedia if(), that turns OFF colorbox after it has turned itself ON. We'd still be downloading a bunch of JS that we're not using, but we'd be putting the code in our own files so we wouldn't have to worry as much about breaking upgrades. But I don't know how to turn off colorbox via js.

I'll contact Jack Moore (colorbox creator) and post back if he has any tips for that 3rd bullet (which seems like it might be simplest).

Woot! Colorbox already has an off switch ($.colorbox.remove();). Disabling colorbox via javascript is pretty easy. Like so:

if (window.matchMedia) {
		
        // Establishing media check
			width700Check = window.matchMedia("(max-width: 700px)");
			if (width700Check.matches){
				$.colorbox.remove();
			}
		
    }

I'm just using a max-width check but really you could check on anything that you want in there - browser size, HD capabilities, day of the week, whatever. The colorbox falls back to just being a plain old link: in my case, to the full-size image; with a login link I assume it takes the user to the login page.

Hi there ...

Woot! Colorbox already has an off switch ($.colorbox.remove();). Disabling colorbox via javascript is pretty easy.

Please give me an advice where exactly to put the code.
Is it in jquery.colorbox.js ?
It didn´t work for me to put it there, maybe theres a need for a special position? Isn´t there a function needed before the if (window.matchMedia)? Puting in just $.colorbox.remove(); removes the colorbox function, so the location should be the right one.

I´m opening videos from a preview-image into the colorbox, what works very nice on desktop formats, but isn´t very handy on mobile devices.

Thanks for a hint

Vincent

//Edit: I´ve got it to work when loading the snipped into the function load () ... but ... it works when resizing the desktop browser to a narrow mobile-like format, but colorbox is still loading on a mobile device.

any suggestion to detect a mobile-device in another way than the width?

There is another way to determine if someone is using a mobile browser with browser sniffing (look at https://drupal.org/project/browserclass). Although I wouldnt recommend it.

I believe the easiest way is to check for the width. There is minWidth , a small library that lets you do a lot of crazy stuff (like relocating objects in the dom) https://github.com/edenspiekermann/minwidth-relocate. You could use minWidth to determine the window and kill the colobox.

I have finally made a patch based on @leenwebb suggestion.

Please try it out and report back here how it works for you.

In this patch I set the mobile detection to be on by default and the max with to 480 pixels. What do you think about that?

Committed to 7.x-2.x.

Other than the misspelling of mobile, this is awesome! :-P Thanks! How soon might we get a tagged release?

Just pushed a spelling fix. It was correct in Swedish :-).

If you can test and confirm that it works well with the latest changes I can make a 7.x-2.5 release.

Hi I tried with the 7.x-2.x-dev version right now. I have set the mobile detection to 768px form the admin in the colorbox configuration. I still get the colorbox when im on a width less then 768px. You can see my 2 screenshots attached.

Thanks for taking the time and test!

It is for *device* width and not window width as I have coded the solution.

So it should have no effect when simply resizing your browser window on your computer. To see the effect you need a device with screen smaller than the value you selected, e.g. your mobile phone.

If you want to test it in your browser you can change this line in the file "colorbox/js/colorbox.js":

mq = window.matchMedia("(max-device-width: " + settings.colorbox.mobiledevicewidth + ")");

so it looks like this:

mq = window.matchMedia("(max-width: " + settings.colorbox.mobiledevicewidth + ")");

After you made the browser window small I believe you need to reload the page to see the effect.

I have tried with an Iphone 3GS, but the colorbox is still there. Se the attachment for a screenshot.
Also, I returned the value to 480px for max width of mobile device, but the colorbox is still loaded.

I just tested this as well. Also with an iphone 3GS. I use 980px as the max width, but the colorbox is still loading. Sorry I can't provide more technical information, I'm not a technical user.

+1 on the mobile patch, works great!

Something's not right with the patch that was committed - it my case, colorbox doesn't work on the desktop either. No errors, it just doesn't do anything. I see the script is loaded and the links have the colorbox attribute, but they just go straight to the images instead of loading then in the colorbox.

I have it working on a few sites so something is special about yours.

Please make a new issue with information about your setup.

Does not work for me. I have enabled the mobile detection and used the default max-width of 480px then changed it to 580px, not working. I also cleared cache, no effect (Tested on iPhone 5S and iPad4-mini) . Is there any other solution beside the max-with for disabling the color-box on all kind of mobile/tablet devices?

EDIT: We have a view which we added the colorbox class to an image field. Here is an online version.

EDIT 2: Mine is solved. It was related to color box_node not colorbox.