How to use Colorbox (a lightbox plugin) in Customer portal Knowledge Base

Home > Customizations > Customer portal > How to use Colorbox (a lightbox plugin) 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 modal image gallery, a.k.a a lightbox. In our example we are using the Colorbox plugin to implement a lightbox functionality.

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

<script src='https://code.jquery.com/jquery-3.6.0.min.js' type='text/javascript'></script>
<script src='https://code.jquery.com/jquery-migrate-1.4.1.min.js' type='text/javascript'></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script>
<script type="text/javascript">
  $(window).load(function() {
    // 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()) {
           $(this).wrap("<a href=\"" + $(this).attr('src') + "\"></a>");
           $(this).parent().colorbox({photo:true,scalePhotos:true,maxWidth:'90%',maxHeight:'90%'});
       }
    });
  });
</script>

Besides the code above, you should also add Colorbox's CSS into Customer portal > Settings > Customize Design > Design > Custom CSS, you can use for example the one below:

:root {
  --controlsIcon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAACCCAMAAACKP+2+AAAA0lBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmZmZOT1BKSkopKSkZGRoQEBAICAjv7+9aWlpra2uHiYt/gIF7e3t2d3hzc3Nub3Hq6uvq6+vm5udSUlLe3t9FRkdCQkI6OjotLS4hISG9vb3P0NIzMzPFxcbS09Str7GnqKmlpaaZmZmPkJKLi4vi4+SDg4TMzMzBw8Ta29y3ubvW1te0tbX39/f////g4eLY2drHyMqpq62Tk5Stra2goqShuidxAAAAD3RSTlMAESIzRFVmd4iZqrvM3e5GKvWZAAAFL0lEQVR4Xu3aV5eyOACA4dAHlYSOvfc6vc/Xdvf//6UNxiECo2AIZy923pu5cPQxEQKeCFRwOklWriDKqKbJsgROp4IqOJ+gnQWgAjKqAiSDjNRzQxCyBBkBZGT+Fx2HRwA/GoOYJQgGAnneSRWRrI4bCqOmi0haplBDIYGgmkEoRHA77TY26vf3HSLALEGFiBAYqWjxpLiBSPN2q+2Oms2eR4hKHJC0eBUMREQ6QzkmDGq0Hh8b/lfzpBgoHSFOpSc/DGK02yYW0oSOUH6CGmli0ul0um6CIAILgZQUMen1zG634aYIBbERRpKYNhp138GMlyQMRgJJccIzzZGPkNNoWISIDnYJsRJq4vxeWFjABob2iXSNYSToRIjoq+gKqhUnwNVXhMyVALUT08iREPQEAFXAiaDJlWNAFwFHgibJh+jr8yZo7ISz4EEsFqeJdW/Gg1ib8zQRLUGcCHP6JeFPTX4ENtKEb+EHGmsexNzEWX6S8O16SJizMJeV8Jw5rm6Gjfw44Vl1TGCj0et2uzNWYlbfZxLDowQRqMFOTEfUwHmUcO0RJbDBPopRyiCEa1mjmFGASBgOIVzbxgTBCbIuTlAjJNaYiBvshEUMikz2hD9LGgWIhGH5IUGMiC9KUAM39aODdm4f8UUIOzQiZEYPWmqQ5qzE2qYGESiBFseGy0q4NjH2yCK5DLp7f85lpd0ji/Ri7k6w4fAgHDwQ20NpAnkTmxNhR0JEUIMLsbCnREgTyJ/xIWY+ShLU8HkQ/n93H1U+8U18E2peQmUmxLyEyEpUQe6qjISUn5DYCBVckMpAQCLkN2Bugn7pvTBRh+eIiibHkgBTkhxLq0REVQQlJVYJoYMS00OiCkqtigmxXEJEQAclpwOlbEIBWtmEBoyyCQOgkoehIYCgVKYgQUwgqJQnKPCwRlVKQuTK8UpbjacxnJCiVo2Xdb3QhcsAQb/8qle7yBBqKINgNqjAQlxyxmiIjYD5CchIIDmvIH/fmRcgvolvwrszeRDm3UnCWw46PIju4NmLE1To8yE6g4AYScJ5G/YDPkQQBJt5mnC2w+EgaPIgHoPg42M4TxKT1cOwPwiC99flcmmxEpPrP3/vdkFIfPSncWL0Mn4YDvuYD2uzEtfhiwwI8eNH/Zio/3oZ/yTD4EdggxKPb5QIeBHY+Lj/JFrbt7eX8fiBGLgOOxG9T9ItIbpPq+1hGNgYFCLCqYgZzWPiYGBk0GUnyExFRkAI1FqRYWBjj/SLEGQYh7BACFTHxMEIkSEzcUNmIjLq9KC1iBEioVKIIMaACJRA083B2NdjJW6jycbIOLFF4uyNX083uFuHlXBub66vr9+GIfIyTy2Dz1uMNHgsg61wIEsnvZh716vtlgvRw5P1Gt8iocaKDzH++Xpqi6S1MvkQ96fvQLoWD2LU/r/dqulyzvQCo5DUGspIV4SiE6XAc0BN4vFZSPCMIPD5uOUIcAkw/xQMgdcRVUGk9rMTCn/1R3SDoyAhx3/buNg8bbBxN3x4JwIs/qVYSPzY1f6NjeZ4/J78savASujgsxo18PVx56VOTZ2NgEJ8k4UYv5/wGFKEAFkIKIE00Vk+bzZ2mgASvJyoUYESvffX291yOaEENWqXEYauUIAS5p/dnb/48/4+pQRN0Y3ThKGKeTa8Fv/cNH3852Z3n2u3SVSNT0LLu1jPWv6eavt59/00QqggMwGy7vupIaExX3OkfM8EhgDypLPu+wkQXIF8XSUAqOR9IpBBzmQdUsDQhNzP+xfqGeAsc0X+FgAAAABJRU5ErkJggg==);
}
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
#cboxOverlay{background:#000; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
#cboxContent{margin-top:20px;background:#000;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{border:5px solid #000; background:#fff;}
#cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
#cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
#cboxLoadingGraphic{background:url("data:image/gif;base64,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") no-repeat center center;}
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
#cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background: var(--controlsIcon) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:bottom left;}
#cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background: var(--controlsIcon) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
#cboxNext:hover{background-position:bottom right;}
#cboxClose{position:absolute; top:5px; right:5px; display:block; background: var(--controlsIcon) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
#cboxClose:hover{background-position:bottom center;}
Note: of course you can use your own library for a lightbox or choose a different CSS theme for the Colorbox from their website.

 

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:

 

Updated:

Other Articles

×