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!

Answer 1

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

Answer 2

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.

Answer 3

disable fancybox with screen size

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

Answer 4

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'
  });

}

Answer 5

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>

Answer 6

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;
    }
};