禁用移动设备上的Fancybox

Question

经过大量的研究和挫败，我认为我在禁用移动设备上的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>`

- Jonathan Francis

Answer 1

我使用的一种方法是检查仅在移动响应视图中显示的元素的可见性，然后劫持点击绑定到我的其他操作。尽管这种方法仍然初始化了Fancybox，但远非理想。

例如：

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

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

就像我说的那样，这不是理想的解决方案，但在完全响应式的环境中运行良好，不需要依赖浏览器检测。

- chriseverson

Answer 2

我不太确定我是否理解了您代码的逻辑，因为在您的条件语句中，无论条件是true还是false，您都启用了fancybox... 我猜您误解了API选项overlayShow，它适用于遮盖在页面上方且在fancybox后面的半透明背景，而不是fancybox本身。

无论如何，我已经在一些生产网站上运行了这种情况，我的方法基于这样一个事实：如果存在某些条件，则更容易启用某些内容if，而不是禁用某些内容if。换句话说，if您检测到移动设备，那么就不要加载fancybox，简单明了。

我的首选方法是使用此脚本http://detectmobilebrowsers.com/来检测移动设备（浏览器）。请注意this page中有关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>

- JFK

---

非常感谢您的帮助，看到我的编码逻辑出了问题真是太有用了（我刚刚删除了警报行，因为它有点分散注意力）。现在这个脚本已经可以工作了，但它似乎仍然在做自己的事情。连接到fancybox的href应该在移动设备上作为标准链接打开（在未启用fancybox的情况下），但它卡在了刷新循环中。标准操作系统上的fancybox也不再加载：http://www.dinkystore.com/collections/models/products/corgi-toys-1401-husky-aston-martin-bubble-trade-set嗯... - Jonathan Francis

你正在注释掉fancybox选项，这样它就不知道它是一个“iframe”类型...顺便说一下，这个双斜杠“//”禁用了fancybox选项...从你的脚本中删除它们。此外，ID是唯一的，应该在同一文档中只使用一次（你两次使用相同的“id =“for_fancybox””）...而且你只需要使用建议的脚本一次即可...你正在重复编写相同的脚本。 - JFK

再次感谢 - 我已经做了一些更改，试图解决上述问题，但它对我来说并不符合要求。我删除了第二个脚本，但发现剩下的脚本只能为两个链接中的一个工作。然后我用旧脚本替换了第二个脚本。然后尝试再次重复新脚本，但无论我做什么，第二个按钮现在都无法在任何平台上以fancybox方式打开。然后我尝试了iframe设置（将其更改为swf、image和ajax），但这些都没有给出所需的结果，它就是不愿意合作 :-s。 - Jonathan Francis

我一直在不断尝试，现在已经有所进展了。 - Jonathan Francis