diff --git a/templates/base.j2.html b/templates/base.j2.html
index 23b41b2..3058b74 100644
--- a/templates/base.j2.html
+++ b/templates/base.j2.html
@@ -178,7 +178,9 @@
{% include 'symbols.svg' %}
diff --git a/templates/lightbox.js b/templates/lightbox.js
new file mode 100644
index 0000000..c8a9107
--- /dev/null
+++ b/templates/lightbox.js
@@ -0,0 +1,59 @@
+var links2img = []
+
+function initLightbox() {
+ var links = document.getElementsByTagName("a");
+ for(var i = links.length; i--; ) {
+ var imginside = links[i].getElementsByTagName("img");
+ if (imginside.length == 1 ) {
+ links2img.push(links[i])
+ links[i].onclick = openLightbox;
+ }
+ }
+}
+
+function openLightbox(e) {
+ var lightbox = document.createElement('div');
+ lightbox.style.width = "100%";
+ lightbox.style.height = "100%";
+ lightbox.style.position = "fixed";
+ lightbox.style.top = "0";
+ lightbox.style.left = "0";
+ lightbox.style.display = "table";
+ lightbox.style.zIndex = "999";
+ lightbox.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
+ lightbox.addEventListener('click', function(){
+ closeLightbox(lightbox);
+ });
+
+ var fig = document.createElement('figure');
+ fig.style.display = "table-cell";
+ fig.style.align = "center";
+ fig.style.verticalAlign = "middle";
+
+ var img = document.createElement('img');
+ img.src = e.target.parentNode.href;
+
+ fig.appendChild(img);
+ lightbox.appendChild(fig);
+
+ var aroot = findLightboxroot(e.target);
+ aroot.appendChild(lightbox);
+
+ return false;
+}
+
+function findLightboxroot(e) {
+ if (e.nodeName == "ARTICLE") {
+ return e;
+ }
+ else {
+ return findLightboxroot(e.parentNode);
+ }
+}
+
+function closeLightbox(t) {
+ t.parentNode.removeChild(t);
+ return false;
+}
+
+initLightbox();