How to open images in a lightbox

In cases where images within knowledge base articles are wider than the available space designated for article's content, they are automatically resized to fit. This can sometimes make important image details too small to see clearly. To address this, images can be made to open in full screen when clicked on. This can be accomplished by using a lightbox. In this example, we will be using the GLightBox JavaScript lightbox plugin.

To implement the lightbox functionality, navigate in your LiveAgent admin panel to Customer portal > Settings > General Configuration - Change > Tracking codes, and copy-paste the code below into the "After <HEAD>" field:

<!-- Open images in lightbox Start -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox@3.3.1/dist/css/glightbox.min.css" integrity="sha384-GPAzSuZc0kFvdIev6wm9zg8gnafE8tLso7rsAYQfc9hAdWCpOcpcNI5W9lWkYcsd" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/glightbox@3.3.1/dist/js/glightbox.min.js" integrity="sha384-MZZbZ6RXJudK43v1qY1zOWKOU2yfeBPatuFoKyHAaAgHTUZhwblRTc9CphTt4IGQ" crossorigin="anonymous"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
 if (typeof GLightbox !== 'function') return;
 document.addEventListener('click', (e) => {
   const img = e.target.closest('img');
   if (!img || !img.closest('.ArticleContent')) return;
   e.preventDefault();
   const href = img.currentSrc || img.src;
   const lightbox = GLightbox({
     elements: [{ href, type: 'image' }]
   });
   lightbox.open();
 });
});
</script>
<!-- Open images in lightbox End -->

Once the code is implemented, all images in your knowledge base articles will open in a lightbox when clicked. You can test this feature by clicking on the image below:

How to open images in a lightbox

Other Articles