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 = '';