Making Business Catalyst Lightbox Responsive

Question

I have been trying to figure out how to make BC's photogallery lightbox responsive. I don't know why they wouldn't make it responsive in the first place, but whatever. Here is the webpage I am working on: http://ladyilgphotography.businesscatalyst.com/family-photography

Here is what I have so far.

<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>

I'm sure this is not the cleanest solution or the most effective, but it's working!

The problem is that the script runs as soon as the picture is loaded, and then Business Catalyst's script runs after which resets the values my function had set.

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.

Lastly, I tried using another photo gallery plugin, but the only problem with that is that plugins like pretty photo or photoswipe only target the images that are loaded on the page, but in my case, there are more images in the gallery than the ones showing on the page.

To summarize my rant, again, how can I make BC's lightbox responsive so that both the width and the height match those of the image being loaded on it?

Answer 1

I use these few rules of CSS to enforce fluid size on BC's Lightbox modal popup:

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

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

#lightboxImage {
    max-width: 100%;
}

No other JS or HTML changes required. Here's a quick video demo: 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.

I can't reproduce that on Chrome, Firefox or IE11. Could it be some other JS/CSS on the page? What browsers is it occurring in?

---

EDIT: A workaround for the 'growing height' issue, thanks to @nvncbl: apply font-size: 0 !important to #outerImageContainer.