如何在页面中心加载图像- 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中，窗口$( jQuery ).height属性在某些情况下返回错误的值，这会导致框显示在窗口底部附近，甚至在底部之下。

我在网上发现了一些解决这个jQuery错误的方法，包括在文件的开头指定，但这对我不起作用。

通过window.innerHeight的普通JavaScript解决方案解决了大多数现代浏览器的问题，但不适用于IE版本8和更早的版本。