Home > Technical Support > Tips & Tricks > Customer portal > How to use ColorBox (LightBox) in Customer portal Knowledge Base

How to use ColorBox (LightBox) in Customer portal Knowledge Base

If you are adding larger pictures to your knowledgebase articles you might want to have a way to open them in full on click so the customer can see the details of the picture. This can be achieved with a LightBox.

To do this you need to navigate in your LiveAgent admin panel into Customer portal > Settings > Customize Design > Tracking codes and put one of the below codes into the After <HEAD> section.

The codes differ based on the theme you use so please find that out under Customer portal > Settings > Customize Design > Design section.

Code for Montana theme:

<link rel="stylesheet" href="//ladesk.com/fileadmin/css/ext-colorbox/colorbox.css?t" />
<script type="text/javascript">
    function includeColorbox() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "//ladesk.com/fileadmin/js/jquery.colorbox.js?t";
        script.onload = function () {
            addcolorbox();
        }
        document.getElementsByTagName("head")[0].appendChild(script);
    }
    function addcolorbox() {
        // Auto-handle direct jpeg links
        $('.ArticleContent a.FileImage').each(function() {
            $(this).colorbox({photo:true,scalePhotos:true,maxWidth:'90%',maxHeight:'90%'});
        });
        $(".ArticleContent img").each(function() {
            var pic_real_width;
            var image = new Image();
            image.src = $(this).attr("src");
            pic_real_width = image.naturalWidth;
            if(pic_real_width>$(this).width()) {
                if($(this).parent()[0].tagName != 'A') {
                    $(this).wrap("<a href=\"" + $(this).attr('src') + "\"></a>");
                    $(this).parent().colorbox({photo:true,scalePhotos:true,maxWidth:'90%',maxHeight:'90%'});
                }
            }
        });
    }
    var myInterval = setInterval(function(){
        if (typeof jQuery != "undefined") {
            clearInterval(myInterval);
            includeColorbox();
        }
    }, 500);
</script>

Code for other themes:

<script src='https://code.jquery.com/jquery-3.3.1.min.js' type='text/javascript'></script>    
<link rel="stylesheet" href="//ladesk.com/fileadmin/css/ext-colorbox/colorbox.css?t" />
<script type="text/javascript">
    function includeColorbox() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "//ladesk.com/fileadmin/js/jquery.colorbox.js?t";
        script.onload = function () {
            addcolorbox();
        }
        document.getElementsByTagName("head")[0].appendChild(script);
    }
    function addcolorbox() {
        // Auto-handle direct jpeg links
        $('#MainContent a.FileImage').each(function() {
            $(this).colorbox({photo:true,scalePhotos:true,maxWidth:'90%',maxHeight:'90%'});
        });
        $("#MainContent img").each(function() {
            var pic_real_width;
            var image = new Image();
            image.src = $(this).attr("src");
            pic_real_width = image.naturalWidth;
            if(pic_real_width>$(this).width()) {
                if($(this).parent()[0].tagName != 'A') {
                    $(this).wrap("<a href=\"" + $(this).attr('src') + "\"></a>");
                    $(this).parent().colorbox({photo:true,scalePhotos:true,maxWidth:'90%',maxHeight:'90%'});
                }
            }
        });
    }
    var myInterval = setInterval(function(){
        if (typeof jQuery != "undefined") {
            clearInterval(myInterval);
            includeColorbox();
        }
    }, 500);
</script>
Note: of course you can use your own library for jQuery's Colorbox plugin instead of ours ' jquery.colorbox.js '

 

So in result you will be able to show picture on click in a LightBox. Try it by clicking the picture below. This will work only for images with width larger than the actual article box. Smaller images will not be clickable. Click on the picture to see how it works:

Ready to try LiveAgent?

It's free for the first 14 days! No credit card required.

Get Started
We work well with others...
Magento Joomla Wordpress Mailchimp
Contact us

support@liveagent.com

+1-800-811-6590 (Toll Free in USA & Canada)

+421 2 33 456 826 (European Union & Worldwide)

Quality Unit, LLC 616 Corporate Way, Suite 2-3278 Valley Cottage, NY 10989

Stay in touch
Blog Google+
© 2004-2020 LiveAgent.com, All rights reserved