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。

我想到的另一个解决方案就是向＆＃34;＃outerImageContainer＆＃34;添加95％的最大宽度，但是当我这样做时，它会在点击图库中的几次点击后开始崩溃当灯箱包装器保持不变时，图像开始在页面上越来越远地移动。

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

编辑：一个解决方案，以增加身高＆＃39;问题，感谢@nvncbl：将font-size: 0 !important应用于#outerImageContainer。

使Business Catalyst Lightbox响应

1 个答案: