全屏iPhone中的Magnific Popup

我在站點上使用奇妙的Magnific Popup腳本來顯示圖像畫廊。全屏iPhone中的Magnific Popup

此站點同樣也支持蘋果手機網頁應用程序，可在iPads和iPhone上進行全屏查看。

(function(document,navigator,standalone) { 
    // prevents links from apps from oppening in mobile safari 
    // this javascript must be the first script in your <head> 
    if ((standalone in navigator) && navigator[standalone]) { 
     var curnode, location=document.location, stop=/^(a|html)$/i; 
     document.addEventListener('click', function(e) { 
      curnode=e.target; 
      while (!(stop).test(curnode.nodeName)) { 
       curnode=curnode.parentNode; 
      } 
      // Condidions to do this only on links to your own app 
      // if you want all links, use if('href' in curnode) instead. 
      if(
       'href' in curnode && // is a link 
       (chref=curnode.href).replace(location.href,'').indexOf('#') && // is not an anchor 
       ( !(/^[a-z\+\.\-]+:/i).test(chref) ||      // either does not have a proper scheme (relative links) 
        chref.indexOf(location.protocol+'//'+location.host)===0) // or is in the same protocol and domain 
      ) { 
       e.preventDefault(); 
       location.href = curnode.href; 
      } 
     },false); 
    } 
})(document,window.navigator,'standalone');

這個腳本阻止彈出Magnific酒店從iOS上的全屏模式時燒：我使用的是保持獨立腳本（https://gist.github.com/irae/1042167），以防止

網頁間導航時被傾倒回移動Safari瀏覽器。我的彈出Magnific酒店初始化腳本如下：

jQuery(document).ready(function($) { 
    $('.lightview').magnificPopup({ 
    type: 'image', 
    removalDelay: 500, 
    gallery:{ 
     enabled:true, 
    }, 
    image: { 
     verticalFit: true, 
     titleSrc: function(item) { 
     return '<strong>' + item.el.attr('title') + '</strong>' + ' <br /><span class="lightbox-caption">' + item.el.attr('data-caption') + '</span>'; 
     }, 
     markup: '<div class="mfp-figure">'+ 
        '<div class="mfp-close"></div>'+ 
        '<div class="mfp-img"></div>'+ 
        '<div class="mfp-title-holder">'+ 
        '<div class="mfp-title"></div>'+ 
        '</div>'+ 
        '<div class="mfp-bottom-bar">'+ 
        '<div class="mfp-counter"></div>'+ 
        '</div>'+ 
       '</div>' 
    }, 
    callbacks: { 
     beforeOpen: function() { 
     this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim'); 
     this.st.mainClass = this.st.el.attr('data-effect'); 
     } 
    }, 
    cursor: 'mfp-zoom-out-cur', 
    closeOnContentClick: false, 
    midClick: true 
    }); 
});

我怎麼能阻止保持獨立從彈出Magnific酒店干擾？

我有一個自動Magnific酒店開幕別處彈出我的網站上未受此影響，它只是似乎是通過點擊鏈接彈出窗口叫...

在此先感謝您的幫助！

來源

2014-04-10 Simon

我通過向Stay Standalone腳本添加一個針對我的彈出鏈接數據屬性的條件來解決此問題。我的最終版本：

(function (a, b, c) { 
if (c in b && b[c]) { 
    var d, e = a.location, 
     f = /^(a|html)$/i; 
    a.addEventListener("click", function (a) { 
     d = a.target; 
     while (!f.test(d.nodeName)) { 
      d = d.parentNode 
     } 
     if ("href" in d && (chref = d.href).replace(e.href, "").indexOf("#") 

      && !d.attributes.getNamedItem("data-effect") // <- FIX IS HERE! 

      && (!/^[a-z\+\.\-]+:/i.test(chref) || chref.indexOf(e.protocol + "//" + e.host) === 0)) { 
      a.preventDefault(); 
      e.href = d.href 
     } 
    }, false) 
} 
})(document, window.navigator, "standalone");

來源

2014-04-16 09:08:11 Simon

全屏iPhone中的Magnific Popup

回答

相關問題