Wiki.js 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.
.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.
<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.
<!-- The lightbox container -->
<div id="mylb-lightbox-container" class="mylb-lightbox-container">
<span class="mylb-close-btn" onclick="closeLightbox()">×</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.
Top comments (0)