禁用的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上移動

回答

相關問題