Improve lightbox opening and closing triggers.

docs/asset/style.css

@@ -502,9 +502,6 @@ body {
   background-color: rgba(0,0,0,0.9);
   width: 100%;
   height: 100%;
-}
-.lightbox-back:hover {
-  background-color: rgba(0,0,0,0.85);
   cursor: pointer;
 }
 .lightbox-item {
@@ -518,6 +515,7 @@ body {
 .lightbox-img {
   max-height: 100vh;
   max-width: 100vw;
+  cursor: pointer;
 }
 
 

docs/logic/lightbox.js

@@ -13,7 +13,7 @@ function Lightbox()
 
   this.load = function(file)
   {
-  	this.item.innerHTML = `<img class="lightbox-img" src="${file}">`;
+  	this.item.innerHTML = `<img class="lightbox-img" src="${file}" onclick="main.lightbox.close()">`;
   	this.container.style.display = 'block';
   }
 

docs/logic/view.js

@@ -105,7 +105,8 @@ function View()
     if (SETTINGS.SHOWIMAG && this.isType(value.TYPE, 'image'))
     {
       itemClass += " griditem-image";
-      onclickImage = `onclick="main.lightbox.load('content/media/${value.FILE}')" style="cursor: pointer;"`;
+      onclickImage = `onclick="main.view.handleImageClick(event, this, '${value.FILE}');"
+        style="cursor: pointer;"`;
     }
 
     let entry = ``;
@@ -369,6 +370,19 @@ function View()
     this.menu.innerHTML = menuContent;
   }
 
+  this.handleImageClick = function(e, element, file)
+  {
+    e = e || window.event;
+    var target = e.target || e.srcElement;
+    if (target == element)
+    {
+      // If user is clicking given element, or element's background... 
+      // as opposed to an element's child content, then do lightbox.
+      // This stops lightbox from happening when clicking on tags, file etc
+      main.lightbox.load(`content/media/${file}`);
+    }
+  }
+
   this.doMultilineFormatting = function(data, className, iconName)
   {
     let result = '';