Disable Lightbox on Small Screens

Envato Authors Theme Authors
1

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

2

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.

3

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

4

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 ".

5

got it, thx

6

“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

7

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.