ナレッジベースの記事内の画像が、記事コンテンツ用に確保されたスペースよりも幅が広い場合、自動的にリサイズされて収まるように調整されます。これにより、画像の重要な詳細が小さくなりすぎて、はっきり確認できないことがあります。この問題に対処するために、画像をクリックしたときにフルスクリーンで開くように設定できます。これはライトボックスを使用することで実現できます。この例では、GLightBox JavaScriptライトボックスプラグインを使用します。

ライトボックス機能を実装するには、LiveAgentの管理パネルで「Customer portal」（カスタマーポータル）> 「Settings」（設定）> 「General Configuration - Change」（一般設定 - 変更）> 「Tracking codes」（トラッキングコード）に移動し、以下のコードを「After 」フィールドにコピー＆ペーストしてください：

<!-- 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 -->

コードを実装すると、ナレッジベースの記事内のすべての画像は、クリックしたときにライトボックスで開くようになります。以下の画像をクリックして、この機能をテストできます：