使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",但是当我这样做,它开始通过画廊和图像点击几下后,打破开始在页面上移越走越远,而收藏的包装保持不变.

最后,我尝试使用另一个照片库插件,但唯一的问题是像漂亮照片或照片的插件只针对页面上加载的图像,但在我的情况下,图库中的图像比显示在页面上.

再次总结一下我的咆哮,我怎样才能使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.

我想到了另一种解决方案是只是一个95%的最大宽度增加了"#outerImageContainer",但是当我这样做,它开始通过画廊和图像点击几下后,打破上开始移越走越远灯箱包装保持不变的页面.

我无法在Chrome,Firefox或IE11上重现这一点.可能是页面上的其他JS/CSS吗？它出现在哪些浏览器中？

编辑:一为不断增长的高度"问题的解决方法,这要归功于@nvncbl:适用font-size: 0 !important于#outerImageContainer.