如何在页面中心加载图像-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及更早版本。