4

我一直在试图弄清楚如何使 BC 的相册灯箱响应。我不知道为什么他们一开始就不让它响应，但无论如何。这是我正在处理的网页：http: //ladyilgphotography.businesscatalyst.com/family-photography

这是我到目前为止所拥有的。

<script>
    $('body').click(function() {document.getElementById('outerImageContainer').onclick=function(){
        var elem = document.getElementById('outerImageContainer');
        var newWidth = 0;
        var newHeight = 0;
        var w = parseInt(elem.style.width);
        var h = parseInt(elem.style.height);
        var ratio = parseInt(w / h);
        newWidth = window.innerWidth - 80;
        alert(newWidth);
        newHeight = parseInt(newWidth * ratio);
        elem.style.width = newWidth + 'px';
        elem.style.height = newHeight + 'px';
    };});
</script>

我确信这不是最干净或最有效的解决方案，但它确实有效！

问题是脚本在图片加载后立即运行，然后 Business Catalyst 的脚本运行，之后重置我的函数设置的值。

我想到的另一个解决方案只是95% max-width在"#outerImageContainer". .

最后，我尝试使用另一个照片库插件，但唯一的问题是漂亮照片或 photoswipe 之类的插件仅针对页面上加载的图像，但就我而言，画廊中的图像比那些更多显示在页面上。

再次总结一下我的咆哮，我怎样才能使 BC 的灯箱响应，以便宽度和高度都与正在加载的图像相匹配？

4

1 回答 1

6

我使用这几条 CSS 规则在 BC 的 Lightbox 模式弹出窗口上强制执行流体大小：

#outerImageContainer {
    max-width: 90%;
    overflow: hidden;
    height: auto !important;
}

#imageDataContainer {
    max-width: 90%;
    overflow: hidden;
}

#lightboxImage {
    max-width: 100%;
}

无需其他 JS 或 HTML 更改。这是一个快速视频演示： http: //gfycat.com/GraveUntriedGuineapig。

我想到的另一个解决方案是在“#outerImageContainer”中添加 95% 的最大宽度，但是当我这样做时，在图库中单击几下后它开始崩溃，并且图像开始越来越远地向下移动页面，而灯箱包装保持不变。

我无法在 Chrome、Firefox 或 IE11 上重现它。可能是页面上的其他一些 JS/CSS 吗？它发生在哪些浏览器中？

编辑：感谢@nvncbl ，解决“身高增长”问题：适用font-size: 0 !important于#outerImageContainer.

于 2014-08-11T09:42:14.130 回答