Отключить 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>`

Answer 1

Один метод, который я использую, хотя и далек от идеала, поскольку он все еще инициализирует Fancybox, - это проверить видимость элемента, который отображается только в представлении для мобильных устройств, а затем перехватить привязку щелчка другим моим действием.

Например:

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

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

Как я уже сказал, не идеальный, но эй, он работает в полностью адаптивной среде, которая не требует использования браузера.

Answer 2

Я не совсем уверен, что понял логику вашего кода, потому что в вашем условном выражении вы включаете fancybox, является ли условие true или же false.... Я думаю, что вы ошибаетесь с опцией API overlayShow, который применяется к маскированному полупрозрачному фону, который лежит над страницей и за fancybox, НО не сам fancybox.

Во всяком случае, я уже запускаю этот сценарий на некоторых производственных площадках, и мой подход основан на том факте, что намного проще включить что-то if определенное условие существует, а не отключить что-то if определенное условие существует. Другими словами, if вы обнаруживаете mobile device тогда не загружайте fancybox, просто.

Мой предпочтительный метод - использовать этот скрипт http://detectmobilebrowsers.com/ для обнаружения мобильных устройств (браузеров). Остерегайтесь примечаний относительно iPhone и iPad от Apple (раздел планшетов) на этой странице.

Тогда ваше условное утверждение должно выглядеть так:

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