如何在頁面中心加載圖片 - slimbox

Question

我有一個Slimbox插件的問題。當我點擊圖片時，圖片加載到底部頁面，需要滾動頁面才能看到圖片。

但在頁面中心的演示圖像加載

Answer 1

CSS樣式

#lbImage { 
     position: absolute; 
     left: 0; 
     top: 0; 
     border: 10px solid #fff; 
     background-repeat: no-repeat; 
    } 

#lbOverlay { 
    position: fixed; 
    z-index: 9999; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: #000; 
    cursor: pointer; 
} 

#lbCenter, #lbBottomContainer { 
    z-index: 9999999999; 
    position: fixed; 
    left: 50%; 
    background-color: #fff; 
    top: 30px !important; 
} 

是爲我工作

Answer 2

打開精縮slimbox2.js，找到代碼：

y=E.scrollTop()+(E.height()/2); 

（它應該位於列1100附近） 並替換它與

y=E.scrollTop()+(window.innerHeight()/2); 

注意：變量名稱可能不同（它們由minifier隨機選擇）。您可能想要搜索「.height（）/ 2」作爲開始。

該代碼計算窗口的垂直中心位置。 發生此錯誤是因爲jQuery $（window）.height屬性在某些情況下在jQuery的後續版本中返回錯誤的值，並且這會導致該框出現在窗口底部附近，甚至底部。

我在網上發現的這個jQuery bug的一些解決方案包括在HTML文件的開始處指定，但這對我沒有用。

通過window.innerHeight的普通JavaScript解決方案解決了大多數現代瀏覽器的問題，但不適用於IE 8和更早版本。