javascript - 使 Business Catalyst Lightbox 响应

Question

我一直在努力弄清楚如何使 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"，但是当我这样做时，它开始崩溃在图库中点击几下后，图片开始在页面上越来越向下移动，而灯箱包装保持不变。

最后，我尝试使用另一个照片库插件，但唯一的问题是像 pretty photo 或 photoswipe 这样的插件只针对页面上加载的图像，但就我而言，图库中有更多图像比页面上显示的要多。

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

Answer 1

我使用这几条 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 .

Another solution that I thought about was just to add a 95% max-width to the "#outerImageContainer", but when I do that, it starts breaking down after a few clicks through the gallery and the image starts shifting farther and farther down on the page while the lightbox wrapper stays the same.

我无法在 Chrome、Firefox 或 IE11 上重现它。会不会是页面上的其他一些 JS/CSS？它出现在哪些浏览器中？

---

编辑:“高度增长”问题的解决方法，感谢 @nvncbl : 将 font-size: 0 !important 应用于 #outerImageContainer。