Geek Answers Handbook

Effectively Respond to Business Directories

I am trying to figure out how to make the lightbox BC photo gallery. I don’t know why they wouldn’t make him react in the first place, but whatever. Here is the webpage I'm working on: http://ladyilgphotography.businesscatalyst.com/family-photography

Here is what I still have.

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

The problem is that the script runs immediately after loading the image, and then the Business Catalyst script runs, after which the values ​​set by my function are reset.

, , 95% max-width "#outerImageContainer", , , , .

, , , , , , , , .

, , BC , , , ?

+4
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 ? ?

EDIT: "", @nvncbl: font-size: 0 !important #outerImageContainer.

+6

More articles:


All Articles