Disable fancybox on handhelds

Question

I need to make sure that upon clicking a link to view a html file, on an iPhone or Android or any handheld, it doesn't use Fancybox to view it, as it does on a computer.

I've tried ways with @media with no luck.

Is there any code to disable certain bits of javascript depending on what device it is?

Thanks!

score 4 · Answer 1 · answered Jan 26 '12 at 11:10

4

Andre's solution will work for a specific subset of devices, but a better approach might be to do it based on screen size, since that's presumably why you don't want to use facnybox (because the screen is too small).

How about this:

if (window.innerWidth < 500 && window.innerHeight < 500) {

    //small screen device - don't use fancy box
}

You can swap out the width and height for whatever the threshold is for fancybox looking okay.

answered Jan 26 '12 at 11:10

Nick Lockwood

40,865
11
112
103

i like your approach, but the numbers are wrong. IPhonem for instance, has a resolution of 960*640 – André Alçada Padez Jan 26 '12 at 11:21
2

Yes, but the iPhone uses virtual pixels, so it reports it's window size as 320x480 so as not to break apps and sites built for older iPhones. Try it if you don't believe me! – Nick Lockwood Jan 26 '12 at 11:26
There are some giant Android phones that may have more than 500pixels resolution, but if the screen is that big then presumably it's okay to use fancy box anyway - that's the point of this approach - you are testing the device beaded on it's actual capabilities, not an arbitrary category like "handheld" which might also include laptop-sized devices like the iPad. – Nick Lockwood Jan 26 '12 at 11:29
Android devices measure their screen sizes in DIPs (device independent pixels) which are like the virtual pixels used by the iPhone, so I think the same would apply. I'm an iOS developer not an Android dev though, so I can't say for certain. – Nick Lockwood Jan 26 '12 at 11:31
Thanks guys I'll give those a try. The main reason I don't want fancybox on the phones/tablets is because you can't scroll the iframe on most of them. Also it doesn't center nicely in the window. – malicedix Jan 26 '12 at 21:27
Does this work when the window is resized, for example from big to small? – HandiworkNYC.com Mar 21 '13 at 20:22
It's based on window size, so it cannot distinguish between a small window on a large screen and a small screen. For that you need another solution. – Nick Lockwood Mar 25 '13 at 00:29

score 1 · Answer 2 · answered May 10 '12 at 10:39

I am using this approach and it is working fine for me...

if( $(window).width() > 480 && (!navigator.userAgent.match(/Android/i) ||
!navigator.userAgent.match(/webOS/i) ||
!navigator.userAgent.match(/iPhone/i) ||
!navigator.userAgent.match(/iPod/i) ||
navigator.userAgent.match(/BlackBerry/))
){
  $(".royalSlide").click().fancybox({
     'overlayShow'  : false,
     'transitionIn' : 'elastic',
     'transitionOut'    : 'elastic'
  });

}

score 1 · Answer 3 · answered Feb 11 '15 at 18:07

For fancybox 2 this worked for me.

$(".fancybox-img").click( function( e ) {
    if ( window.innerWidth < 799 ) {
        e.stopPropagation();
        e.preventDefault();
    }
})
$(".fancybox-img").fancybox( {
    margin     : 100,
    autoSize   : true,
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

score 0 · Answer 4 · answered Mar 21 '13 at 20:23

0

Thinking inside of the box, no pun intended, a non-js solution:

.fancybox-overlay {
    display: none !important;
}

@media (min-width: 1200px) {
    .fancybox-overlay {
        display: block !important;
    }
};

answered Mar 21 '13 at 20:23

HandiworkNYC.com

10,914
25
92
154

score 0 · Answer 5 · answered Jun 08 '21 at 17:13

0

disable fancybox with screen size

@media (min-width: 1000px) {
.fancybox-is-open {
    display: none !important;
}};

answered Jun 08 '21 at 17:13

devashish vishwash

1

score 0 · Answer 6 · answered Jan 26 '12 at 10:50

0

you can use something like

if( navigator.userAgent.match(/Android/i) ||
 navigator.userAgent.match(/webOS/i) ||
 navigator.userAgent.match(/iPhone/i) ||
 navigator.userAgent.match(/iPod/i) ||
 navigator.userAgent.match(/BlackBerry/)
 ){
 // your fancybox instantiation here
}

but it will never be 100% accurate

answered Jan 26 '12 at 10:50

André Alçada Padez

10,987
24
67
120

1

You can do that with a single regex expression: navigator.userAgent.match(/Android|WebOS|iPhone|iPod|Blackberry/i) -it's a bit cleaner. As you say though, it's not ideal because Android might be a tablet, or the device may pretend to be Internet Explorer for compatibility, or it may be some Chinese mobile device you've never heard of, etc. – Nick Lockwood Jan 26 '12 at 11:12

Disable fancybox on handhelds

6 Answers6

Linked