slimbox - 如何在页面中心加载图像 - slimbox

Question

我对 Slimbox 插件有疑问。当我单击图像时，图像会在底部页面加载，并且需要滚动页面才能查看图像。

但在页面中心的演示图像加载

Answer 1

样式

#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 错误的一些解决方案包括在 HTML 文件的开头指定，但这对我不起作用。

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