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>`

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>`

• javascript
• jquery
• mobile
• fancybox
• handheld

2 Answers 2

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 pletely responsive environment that doesn't necessitate relying on browser detection.

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