Adding a simple light box in wiki.js
Tags: wikijs, wiki, tutorial, webdev
Published: 2024-03-20 05:33:35

[Wiki.js](https://js.wiki/) is a self hosted, open source Wiki that has a lot of awesome functionality. Unfortunately it's lacking some small, but important UI features, like a light box, to enlarge downsized images to it's full size. And unless you want to add a link to each image, to open it in a new tab, you would probably go for a modal view here. 

Luckily wiki.js offers a simple solution to add custom code to your theme, so we can make use of it, to add a very simple lightbox.

Go to the admin menu and look for the `themes` page.
Under `Code Injection` you have three fields, one for CSS and two for injection HTML in the `<head>` and the end of the `<body>` section.

First we need some styling for our light box, insert this in the "overwrite css" section. We prefixed everything with `mylb-` to avoid any inferences with other class names.

```css
.mylb-lightbox-container {
  display: none;
  position: fixed;
  z-index: 9999;
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
figure.image {
  cursor: pointer
}
.mylb-backdrop {
  position: fixed;
  cursor: pointer;
  padding: 20px;
  background-color: rgba(0,0,0,.5);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
.mylb-close-btn {
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 20px
}
.mylb-lightbox-image {
  max-width: 90%;
  max-height: 90%
}
```

Then we can inject the script for the actual light box functionality. We initialize the script just a second after the DOM has been loaded, since wiki.js runs on vuejs and the page needs to be rendered first.

```html
<script>
function openLightbox(imageUrl) {
  var lightboxContainer = document.getElementById("mylb-lightbox-container");
  var lightboxImage = document.getElementById("mylb-lightbox-image");
  var lightboxCaption = document.getElementById("mylb-lightbox-caption");

  lightboxImage.src = imageUrl;
  lightboxContainer.style.display = "block";
}

// Function to close the lightbox
function closeLightbox() {
  var lightboxContainer = document.getElementById("mylb-lightbox-container");
  lightboxContainer.style.display = "none";
}

function initializeLightbox() {
  // Attach click event listener to all figure elements with class 'image'
  var figureElements = document.querySelectorAll("figure.image");
  figureElements.forEach(function (figure) {
    figure.addEventListener("click", function (e) {
      var imageUrl = this.querySelector("img").getAttribute("src");

      openLightbox(imageUrl);
    });
  });
}

// Execute the function after DOM content has been loaded and rendered
document.addEventListener('DOMContentLoaded', setTimeout(() => initializeLightbox(), 1000));
</script>
```

Now we only need to add a HTML element, where we can render our light box into. Since it's a modal which should be rendered on top of all other elements we put it at the end of our html-body.

```html
<!-- The lightbox container -->
<div id="mylb-lightbox-container" class="mylb-lightbox-container">
  <span class="mylb-close-btn" onclick="closeLightbox()">&times;</span>
  <div onclick="closeLightbox()" class="mylb-backdrop">
    <img src="" alt="" class="mylb-lightbox-image" id="mylb-lightbox-image">
  </div>
</div>
```

Now all your images will have a click handler that opens a modal with the full screen image. It might not be the cleanest way to add a light box to your wikijs, but it's probably the most easy and fastest solution, to quickly implement this feature, till wiki.js officially supports this.