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 thethemes page.
UnderCode 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 withmylb- 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>functionopenLightbox(imageUrl){varlightboxContainer=document.getElementById("mylb-lightbox-container");varlightboxImage=document.getElementById("mylb-lightbox-image");varlightboxCaption=document.getElementById("mylb-lightbox-caption");lightboxImage.src=imageUrl;lightboxContainer.style.display="block";}// Function to close the lightboxfunctioncloseLightbox(){varlightboxContainer=document.getElementById("mylb-lightbox-container");lightboxContainer.style.display="none";}functioninitializeLightbox(){// Attach click event listener to all figure elements with class 'image'varfigureElements=document.querySelectorAll("figure.image");figureElements.forEach(function(figure){figure.addEventListener("click",function(e){varimageUrl=this.querySelector("img").getAttribute("src");openLightbox(imageUrl);});});}// Execute the function after DOM content has been loaded and rendereddocument.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 --><divid="mylb-lightbox-container"class="mylb-lightbox-container"><spanclass="mylb-close-btn"onclick="closeLightbox()">×</span><divonclick="closeLightbox()"class="mylb-backdrop"><imgsrc=""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)
For further actions, you may consider blocking this person and/orreporting abuse
