Disable Fancybox on Mobile

Question

After a lot of research and frustration I think I may have made an error in my methods to disable fancybox on mobile devices

<script type="text/javascript">
$(document).ready(function() 

{ 
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/))
){
$("a#for_fancybox").fancybox({
'overlayShow'  : false,
'transitionIn' : 'elastic',
'transitionOut'    : 'elastic'
}
else( $("a#for_fancybox").fancybox({ "scrolling": "yes", "centerOnScroll": "yes",        "showCloseButton": true, "height": "95%", "width": "95%", "type": "iframe", "autoScale": true,   "cyclic": true, "overlayOpacity": 0.8, "showNavArrows": false, "titleShow": false, "content":     "<div> n"}

</script>

I'm sure it's something simple and will appreciate any advice anyone can offer.

*I've kept playing and am getting somewhere, however the script is still running on mobiles. I'm wondering if I've performed the detectmobilebrowser.js execution correctly (turn into .js file & place script tag in site's header file).

`<script type="text/javascript">
if( !jQuery.browser.mobile){
$(document).ready(function() {
$("#single1").fancybox({
"scrolling": "yes", "centerOnScroll": "yes", "showCloseButton": true, "height": "95%",     "width": "95%", "type": "iframe", "autoScale": true, "cyclic": true, "overlayOpacity": 0.8,     "showNavArrows": false, "titleShow": false, "content": "<div> n" 
});
$("#single2").fancybox({
"scrolling": "yes", "centerOnScroll": "yes", "showCloseButton": true, "height": "95%",     "width": "95%", "type": "iframe", "autoScale": true, "cyclic": true, "overlayOpacity": 0.8,     "showNavArrows": false, "titleShow": false, "content": "<div> n" 
});
});
}
</script>`

score 3 · Answer 1 · answered Dec 06 '13 at 01:04

One method I use, although, it is far from ideal since it still initializes Fancybox, is to check visibility of an element that only shows in the mobile responsive view, and then hijack the click binding with my other action.

For instance:

$('.fancybox').click(function() {
    if($('#mobile').is(':visible')) {
        // do something here
        return false;
    }
});

$('.fancybox').fancybox();

Like I said, not ideal, but hey, it works in a completely responsive environment that doesn't necessitate relying on browser detection.

score 0 · Answer 2 · answered Jun 26 '12 at 17:41

0

I am not totally sure I understood the logic of your code because in your conditional statement you are enabling fancybox whether the condition is true or false.... I guess you are mistaking the API option overlayShow, which applies to the masked semitransparent background that lays over the page and behind fancybox BUT not to the fancybox itself.

Anyway, I have running this scenario in some production sites already and my approach is based on the fact that is much easier to enable something if certain condition exist rather than disable something if certain condition exist. In other words, if you detect a mobile device then DON'T load fancybox, simple.

My preferred method is using this script http://detectmobilebrowsers.com/ to detect mobile devices(browsers). Beware of the notes regarding Apple's iPhone and iPad (tablets section) in this page.

Then your conditional statement should look like:

<script type="text/javascript">
 if(!jQuery.browser.mobile){
  jQuery(document).ready(function() {
   alert("not a mobile device, fancybox will be enabled");
   jQuery("a#for_fancybox").fancybox({
    // options here
   }); // fancybox
  }); // ready
 } // if
</script>

answered Jun 26 '12 at 17:41

JFK

40,963
31
133
306

Thank you very much for your help, it's so useful to see where my coding logic is going wrong (I just removed the alert line as it was a bit distracting). I've got this script working now; however it still appears to be doing its own thing. The href to which the fancybox is connected was supposed to open as a standard link (to my mind) on mobile (without the fancybox being enabled) but it's stuck in a refresh loop. The fancybox on a standard OS isn't loading anymore either: http://www.dinkystore.com/collections/models/products/corgi-toys-1401-husky-aston-martin-bubble-trade-set Hmmm... – Jonathan Francis Jun 26 '12 at 22:32
you are commenting out the fancybox options so it doesn't know it is an `iframe` type ...FYI this double slash `//` disables the fancybox options ... remove them from your script. Additionally IDs are unique and they should be used once in the same document (you are using the same `id="for_fancybox"` twice) ... also you just need to use the proposed script once too ... you are writing the same script twice. – JFK Jun 27 '12 at 02:58
Thank you again - I have made a few changes to try and resolve the above and it just isn't conforming for me. I deleted the second script but found that the remaining script would only work for one of the two links. Then I replaced the second script with the old script. and then tried repeating the new script again, and whatever I do the second button now won't open in a fancybox on any platform. Then I played with the iframe setting (changing it to swf, image and ajax) but none of these gave the required result, it just refuses to play ball :-s. – Jonathan Francis Jun 27 '12 at 11:11
*I've kept playing and am getting somewhere. – Jonathan Francis Jun 27 '12 at 12:55

Disable Fancybox on Mobile

2 Answers2