How To Add Click To Zoom To Your Knowledge Base Images

Written By Denis Omerovic (Administrator)

Updated at May 20th, 2020

To enable click to zoom option follow these steps:

  1. Login to your Helpjuice account


  2. Go to your customization tool -> main layout and at the end of the file just right before {{ main_js }} paste this code {{ click_to_zoom_js }} and save the file.




  3. After that go to your Main CSS file and at the end of that file paste the code below
/**************** Popup Image *******************/
div.popup-image {
    position: relative;
    overflow: hidden;
    .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: .5s ease;
        background-color: rgba(0,0,0,.6);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #FFF;
        cursor: pointer;
        transition: transform .5s ease;
        font-weight: 600;
    }
    img {
        transition: transform .5s ease;
        cursor: pointer;
        height: auto;
        max-height: 150%;
    }
    &:hover {
        img {
            -webkit-transform: scale(1.05);
            -moz-transform: scale(1.05);
            transform: scale(1.05);
        }
        .overlay {
            opacity: 1;
            -webkit-transform: scale(1.05);
            -moz-transform: scale(1.05);
            transform: scale(1.05);
        }
    }
    &.active {
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0,0,0,.2);
        width: 100%;
        height: 100%;
        z-index: 999;
        text-align: center;
        padding: 5%;
        overflow-x: hidden;
        overflow-y: auto;
        .overlay {
            opacity: 0;
        }
        img {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            max-width: 90%;
            width: auto;
            margin: auto!important;
            animation: scaleImage .5s ease-in-out;
            @media (min-width: 1200px) {
                max-width: 80%;
                max-height: 80vh;
            }
            @media (min-width: 1440px) {
                max-width: 1400px;
            }
        }
        &:hover {
            img {
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                transform: scale(1);
            }
        }
    }
    @keyframes scaleImage {
        0% {
            -webkit-transform: scale(0.0);
            -moz-transform: scale(0.0);
            transform: scale(0.0);
        }
        100% {
            -webkit-transform: scale(1.0);
            -moz-transform: scale(1.0);
            transform: scale(1.0);
        }
    }
    
}

   




Hit Save and now you should be able to see click to zoom option.

Note:

If your account supports multiple languages, then you will need to repeat Step 2 for each language, CSS file is automatically updated for each language.



Was this article helpful?