How to add Click To Zoom to Your Knowledge Base Images?

23c7df8aa7a3035caf58a825d71b3332

Written By Denis Omerovic (Administrator)

Updated at May 27th, 2019

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;

                animation: scaleImage .5s ease-in-out;

                @media (min-width: 1200px) {

                    max-width: 80%;

                }

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