PhotoSwipe와 Magnificent Popup (Ajax Type)을 결합하십시오.

Question

Dmitry Semenov의 PhotoSwipe (link)와 Magnificent Popup (link)의 Ajax Type을 결합하려고합니다. 더 구체적으로 말해, 내 index.html 파일에 대한 링크가 있습니다. 클릭하면 Ajax Type Magnificent Popup이 표시되어 내용을 other.html으로 표시합니다. 이 팝업 내 (즉, other.html 파일 내)에는 PhotoSwipe 이미지 갤러리가 있습니다. 이미지를 클릭하면 PhotoSwipe 갤러리가 예상대로 나타나고 정상적으로 작동합니다. 그러나 닫기 버튼 ('x'아이콘)을 클릭하거나 ESC 키를 누르면 PhotoSwipe와 Magnificent Popup이 모두 닫힙니다. PhotoSwipe 팝업 만 닫히도록이 동작을 어떻게 변경할 수 있습니까? PhotoSwipe 팝업이 표시되어 Magnificic Popup이 PhotoSwipe가 닫힐 때까지 클릭이나 키 누르기에 응답하지 않도록 Magnificic Popup을 "비활성화"할 수 있습니까?

나는 자바 스크립트에 대한 기본적인 지식 만 가지고 있기 때문에 대답에 대한 "손 잡고"접근 방식을 고맙게 생각합니다.

Answer 1

나는 Magnific와 Colorbox를 결합하는 것과 비슷한 것을했다. Magnific는 소스를 변경하지 않고 코드의 일부를 무시할 수있는 기능을 가지고 있습니다 (documented in the FAQ). 내 경우에는,이 모습 :

// Prevent "Escape" from closing Magnific popup when Colorbox popup is open 
$.magnificPopup.instance.close = function() { 
    if ($("#colorbox").is(":visible")) { 
    // Don't do anything with Magnific if Colorbox is doing its thing 
    return false; 
    } else { 
    // Do what it would normally do 
    $.magnificPopup.proto.close.call(this); 
    } 
}; 

을 당신은 뭔가 PhotoSwipe 별에 if 테스트를 변경해야합니다. 아마도 해당 라인을 if ($(".pswp--open").length > 0) {으로 교체하면됩니다. (자바 스크립트는 pswp--open 클래스를 가진 요소의 개수를 (jQuery를 통해) 계산합니다 (PhotoSwipe 데모에서 적어도 마크 업에 추가되는 클래스로 열립니다).