Magnific Popup - 更高的mfp底部條引起最大圖像高度問題

我自定義Magnific彈出菜單/ lightbox的標題以包含使用'更改'回調的多行內容，並修改Magnific Popup - 更高的mfp底部條引起最大圖像高度問題

this.content

在回調中。它正常工作，除非事實上如果彈出窗口中的圖像非常高，或者窗口重新調整到較小的高度，那麼Magnific正在調整圖像的「最大高度」所進行的計算似乎是隻考慮標題的單行文本。

有誰知道需要什麼來調整圖像的最大高度計算，以考慮更高的標題框？

謝謝

* *編輯

快速劈jquery.magnific-popup.js圍繞線461在「updateSize：」回調已經讓我來解決這個問題。對於這個彈出窗口/燈箱來說，接受最大高度百分比似乎是合理的，因此它不會填滿屏幕。

這是我的改變，如果可能的話，我會很感激一些反饋。謝謝！

updateSize: function(winHeight) { 

    if(mfp.isIOS) { 
     // fixes iOS nav bars https://github.com/dimsemenov/Magnific-Popup/issues/2 
     var zoomLevel = document.documentElement.clientWidth/window.innerWidth; 
     var height = window.innerHeight * zoomLevel; 
     mfp.wrap.css('height', height); 
     mfp.wH = height; 
    } else { 
     mfp.wH = winHeight || _window.height(); 
     // ######################################## 
     // CHANGE IS RIGHT HERE TO FORCE 80% height 
     // ######################################## 
     mfp.wH *= 0.8; 
    } 
    // Fixes #84: popup incorrectly positioned with position:relative on body 
    if(!mfp.fixedContentPos) { 
     mfp.wrap.css('height', mfp.wH); 
    } 

    _mfpTrigger('Resize'); 

},

來源

2014-01-26 Aaron Hudon

您可以限制在調整大小回調的圖像，這將使更多的空間爲標題的最大高度：

$('a.magnific').magnificPopup({ 
    type: 'image', 
    callbacks: { 
     resize: function() { 
      var img = this.content.find('img'); 
      img.css('max-height', parseFloat(img.css('max-height')) * 0.95); 
     } 
    } 
});

來源

2014-10-18 00:48:13 alexantd

這一個爲我工作的偉大。儘管我需要爲「resize」和「change」添加相同的回調函數，以便它能夠徹底運行。 – cmfolio

我想補充我的貢獻。因爲我想把標題和描述都包含在圖像中。這意味着我無法在視口空間中放入所有這些信息。描述被切斷，我留下了一個滾動條。

@alexantd - 我試過你的回調加法，只有當窗口被調整大小時才起作用。

@ajhuddy - 您的解決方案對我來說非常合適。我能夠很好地適應文本。儘管圖像相當小，頂部有很多空間。

我調整填充以重新獲得40px的空間顯示一個稍大的圖像。這是我的CSS這樣做。下面的CSS允許我將圖像縮小到0.85（85％）。

.mfp-img { 
    padding: 0px 0px 40px !important; 
} 
.mfp-close { 
    margin-top: -40px; 
}

來源

2015-06-16 04:12:22 LifeSteala

-1

else b.wH=a||v.height()**,b.wH*=.9**;b.fixedContentPos

來源

2016-08-29 10:53:27 bud

請解釋你的答案。 –

歡迎來到Stack Overflow！儘管這段代碼可以解決這個問題，但[包括一個解釋]（// meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers）確實有助於提高您的帖子的質量。請記住，您將來會爲讀者回答問題，而這些人可能不知道您的代碼建議的原因。也請儘量不要使用解釋性註釋來擠佔代碼，因爲這會降低代碼和解釋的可讀性！ – FrankerZ

請編輯更多信息。僅限代碼和「嘗試這個」的答案是不鼓勵的，因爲它們不包含可搜索的內容，也不解釋爲什麼有人應該「嘗試這個」。 – abarisone

Magnific Popup - 更高的mfp底部條引起最大圖像高度問題

回答

相關問題