diff --git a/docs/asset/style.css b/docs/asset/style.css
index 2710751..82eefd5 100644
--- a/docs/asset/style.css
+++ b/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;
}
diff --git a/docs/logic/lightbox.js b/docs/logic/lightbox.js
index b87ea50..5cba5af 100644
--- a/docs/logic/lightbox.js
+++ b/docs/logic/lightbox.js
@@ -13,7 +13,7 @@ function Lightbox()
this.load = function(file)
{
- this.item.innerHTML = ``;
+ this.item.innerHTML = ``;
this.container.style.display = 'block';
}
diff --git a/docs/logic/view.js b/docs/logic/view.js
index b3bfbb5..17470b4 100644
--- a/docs/logic/view.js
+++ b/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 = '';