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">
var readyStateCheckInterval = setInterval(function() {
    if (document.readyState === "complete") {
        clearInterval(readyStateCheckInterval);
    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);
    }
}, 10);
</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: