結合PhotoSwipe與Magnific Popup（Ajax類型）

我試圖將Dmitry Semenov的PhotoSwipe（link）與他的Magnific Popup（link）的Ajax Type結合起來。更具體地說，我在我的index.html文件上有一個鏈接。單擊時，會顯示Ajax Type Magnific Popup，其中顯示other.html的內容。在此Popup內（即在other.html文件中）是PhotoSwipe圖像庫。當我點擊圖像時，PhotoSwipe圖庫按預期顯示，並且工作正常。但是，當我單擊關閉按鈕（'x'圖標）或按ESC鍵時，PhotoSwipe和Magnific Popup都會關閉。我如何改變這種行爲，以便只關閉PhotoSwipe彈出窗口？有沒有辦法在顯示PhotoSwipe彈出窗口時「禁用」Magnific Popup，以便Magnific Popup不響應任何點擊或按下按鍵直到PhotoSwipe關閉？結合PhotoSwipe與Magnific Popup（Ajax類型）

我只有JavaScript的基礎知識，所以我真的很感激「答案」的答案。

來源

2016-06-16 Alarik

我做了一些類似的結合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); 
    } 
};

你將不得不改變你的if測試的東西PhotoSwipe特異性。也許用if ($(".pswp--open").length > 0) {代替這一行就行了。（JavaScript（通過jQuery）計算pswp--open類中的元素數量，至少從PhotoSwipe演示中可以看出，它是打開時添加到標記中的類。）

來源

2016-06-16 23:01:08

謝謝，這確實有效！但是，這導致我發現另一個問題：Magnific在PhotoSwipe彈出窗口的右上角添加了「關閉」按鈕，使我無法點擊屬於PhotoSwipe的關閉按鈕。這讓我想問：只要啓動PhotoSwipe，是否有辦法禁用所有的Magnific功能？ – Alarik

您應該可以通過Magnific中的closeBtnInside選項（不確定PhotoSwipe中是否有類似內容），或者通過調整'.button.mfp-close'的CSS來調整「x」的位置。另一個選項，如果它適用於您的情況，可以在打開PhotoSwipe時關閉Magnific彈出框，然後在調用PhotoSwipe關閉事件時重新打開它。有人在這個小提琴中做了這個，除了兩個Magnific實例：https://jsfiddle.net/matthieuG/zt4coq8f/1/ –

我試圖通過添加'$（'。mfp-close'）來消除「x」。 .css（'visibility'，'hidden'）;'發起啓動PhotoSwipe的腳本。這會去除PhotoSwipe上的「x」和Magnific上的「x」。我想在PhotoSwipe關閉時將「visibility」設置爲「visible」，但我無法使其工作。爲什麼不添加'var el = document.getElementsByClassName（'mfp-close'）; \t \t el.style.visibility =「visible」;'close函數有效嗎？有沒有辦法這樣做？ – Alarik

結合PhotoSwipe與Magnific Popup（Ajax類型）

回答

相關問題