themelego

            How to add a Lightbox to anything

            For better instruction, watch tutorial video here.

            • Add "Lightbox" element into Visual Composer back-end editor (located in KIT Addons tab)
            Screenshot_1.png
            • The "Lightbox Settings" panel will open > Set the Lightbox ID. You can type any name you want, this ID helps a button (or anything can open a link) to identify which lightbox to open.


            • Click "+" to add any element inside lightbox. Or you can drag element into it.



            • Done. You've successfully created a Lightbox.
            • Next, let's create a button to open this lightbox.

            • By default, the "Button" element of VCKit (located in KIT Addons tab) has a function to open a Lightbox.
            • Let's add a VCKit's Button
            Screenshot_2.png

            • In the "Button Settings", scroll down to the end and find "Advanced on click action" box, choose "Open lightbox".
            • The "Lightbox ID" field will appear, type the chosen Lightbox ID. (as example above: "demo").


            • Done. Now when clicking on this button , it will open the Lightbox with ID "demo" (the one has a video inside it).





            Extra:

            Beside VCKit's Button, you can make any other element to open VCKit's lightbox, as long as that element has a function to "Open a Link".
            • Add an element which has option to open a link.
            • Fill in the URL field: #lightboxid (remember to add # and remove http)
            • Add extra class name: open-vckit-lightbox
            • That's all steps to make this element open a Lightbox instead of a link.

            For example: 
            • Add a Single image > Set "On click action": "Open custom link" > Fill in the Image Link: #demo


            • Add an extra class name in this Single image element: open-vckit-lightbox

            • Done.





            Updated: 10 Nov 2017 12:24 AM
            Helpful?  
            Help us to make this article better
            0 1