禁用的fancybox上移动

了大量的研究和挫折我想后，我可以在我的方法做了一个错误禁用移动设备上的禁用的fancybox上移动

的fancybox

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

我敢肯定这件事情简单的和欢迎任何建议任何人可以提供。

*我一直在玩，我在某处，但脚本仍然在手机上运行。我想知道我是否已经正确执行了detectmobilebrowser.js执行（在站点头文件中将.js文件&放置脚本标记）。

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

来源

2012-06-26 Jonathan Francis

我不能完全确定我明白你的代码的逻辑，因为在你的条件语句要启用的fancybox条件是否true或false ....我猜你是误将API选项overlayShow，这适用于掩盖半透明背景，覆盖页面和fancybox后面，但不是fancybox本身。

反正我已经在已有的生产基地运行的这种情况下，我的方法是基于这样的事实，更容易使东西一定if存在的条件，而不是禁用东西if一定条件下存在。换句话说，if你发现一个mobile device然后不要加载fancybox，简单。

我的首选方法是使用此脚本http://detectmobilebrowsers.com/来检测移动设备（浏览器）。请注意0中有关Apple iPhone和iPad（平板电脑部分）的说明。

那么你的条件语句应该是这样的：

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

来源

2012-06-26 17:41:28 JFK

非常感谢您的帮助，了解我的编码逻辑出错的地方非常有用（我刚刚删除了警报线，因为它有点让人分心）。我已经有了这个脚本现在工作;但它似乎仍然在做自己的事情。 fancybox连接到的href应该是作为移动设备上的标准链接（在我的脑海中）打开的（没有启用fancybox），但它被卡在刷新循环中。标准操作系统上的fancybox不再加载： http://www.dinkystore.com/collections/models/products/corgi-toys-1401-husky-aston-martin-bubble-trade-set 嗯... –

你正在评论fancybox选项，所以它不知道它是一个'iframe'类型... FYI这个双斜杠'//'禁用fancybox选项...将它们从您的脚本中删除。此外，ID是唯一的，它们应该在同一个文档中使用一次（您使用两次相同的'id =“for_fancybox”'）......您也只需要使用建议的脚本...您正在编写相同的脚本两次。 – JFK

再次感谢您 - 我已经做了一些尝试并尝试解决上述问题，但这不符合我的要求。我删除了第二个脚本，但发现剩下的脚本只适用于这两个链接中的一个。然后我用旧脚本替换了第二个脚本。然后尝试再次重复这个新脚本，现在我做的第二个按钮现在不会在任何平台上的fancybox中打开。然后我玩了iframe设置（将它改为swf，image和ajax），但没有一个提供了所需的结果，它只是拒绝玩球：-s。 –

一种方法我用的，虽然，这是很不理想，因为它仍然初始化的fancybox，是检查，只显示在移动元素的可见性响应式视图，然后用我的其他操作劫持点击绑定。

例如：

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

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

就像我说的，不是很理想，但嘿，它在一个完全响应的环境并不必要依赖于浏览器检测工作。

来源

2013-12-06 01:04:25 chriseverson

禁用的fancybox上移动

回答

相关问题