PhotoSwipeとMagnificent Popup（Ajaxタイプ）を組み合わせる

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とMagnifica Popupの両方が閉じられます。 PhotoSwipeポップアップだけが閉じられるようにこの動作を変更するにはどうすればよいですか？ PhotoSwipeポップアップが表示されている間にマグニシックポップアップを「無効にする」方法がありますので、マグニフィックポップアップは、PhotoSwipeが閉じられるまで、クリックやキーの押下に反応しません。

私はJavaScriptの非常に基本的な知識しか持っていないので、私は本当に答えを手に持つアプローチに感謝します。

Answer 1

私はマグニフィックとカラーボックスを組み合わせるのと似たようなことをしました。 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) {に置き換えるとうまくいくでしょう。 （そのJavaScriptは、少なくともPhotoSwipeのデモから、開かれたときにマークアップに追加されるクラスになるように、pswp--openクラスの要素の数を（jQuery経由で）カウントします。