iPhone 전체 화면 Magnific Popup

이미지 갤러리를 표시하기위한 사이트에서 놀라운 Magnific Popup 스크립트를 사용하고 있습니다.iPhone 전체 화면 Magnific Popup

이 사이트는 Apple-mobile-web-app를 통해 iPad 및 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');

이 스크립트는 iOS에서 전체 화면 모드 때 발사에서 Magnific 팝업을 방지한다 : 페이지 사이를 탐색 할 때 나는 것을 방지하기 위해 스테이 독립 스크립트 (https://gist.github.com/irae/1042167)를 사용하고

은 모바일 사파리로 다시 덤프되는. Magnificent Popup 초기화 스크립트는 다음과 같습니다.

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 
    }); 
});

Magnificent Popup을 방해하지 않으려면 어떻게합니까?

나는 사전에 어떤 도움 ..., 단지 링크를 클릭하여 호출 팝업 것 같다 Magnific 팝업 다른 곳이 영향을받지 않습니다 내 사이트에

감사를 자동 개방이!

출처

2014-04-10 Simon

내 팝업 링크 데이터 속성을 타겟팅하는 조건을 독립 실행 형 스크립트에 추가하여이 문제를 해결했습니다. 최종 버전 :

(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

답변

관련 문제