如何在頁面中心加載圖像-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及更早版本。