Fix lightbox image position

This commit is contained in:
Tetrakern 2023-01-22 23:58:13 +01:00
parent 6b18881949
commit 9b0ebbd700
5 changed files with 12 additions and 8 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
js/lightbox.min.js vendored
View File

@ -1 +1 @@
const fcn_lightbox=_$$$("fictioneer-lightbox"),fcn_lightboxTarget=fcn_lightbox.querySelector(".target");fcn_theBody.addEventListener("click",(e=>{let t=e.target.closest("[data-lightbox]"),l=!1;if(t){if(e.preventDefault(),fcn_lightboxTarget.innerHTML="","IMG"==t.tagName)fcn_lightboxTarget.appendChild(t.cloneNode()),l=!0;else if(t.href){let e=document.createElement("img");e.src=t.href,fcn_lightboxTarget.appendChild(e),l=!0}l&&(fcn_theBody.classList.add("no-scroll"),fcn_lightbox.classList.add("show"))}})),document.querySelectorAll(".lightbox__close, .lightbox").forEach((e=>{e.addEventListener("click",(e=>{"IMG"!=e.target.tagName&&(fcn_theBody.classList.remove("no-scroll"),fcn_lightbox.classList.remove("show"))}))}));
const fcn_lightbox=_$$$("fictioneer-lightbox"),fcn_lightboxTarget=fcn_lightbox.querySelector(".target");fcn_theBody.addEventListener("click",(e=>{let t=e.target.closest("[data-lightbox]"),l=!1,o=null;if(t){if(e.preventDefault(),fcn_lightboxTarget.innerHTML="","IMG"==t.tagName)o=t.cloneNode(),l=!0;else if(t.href){document.createElement("img").src=t.href,l=!0}l&&o&&(o.removeAttribute("class"),o.removeAttribute("style"),o.removeAttribute("height"),o.removeAttribute("width"),fcn_lightboxTarget.appendChild(o),fcn_theBody.classList.add("no-scroll"),fcn_lightbox.classList.add("show"))}})),document.querySelectorAll(".lightbox__close, .lightbox").forEach((e=>{e.addEventListener("click",(e=>{"IMG"!=e.target.tagName&&(fcn_theBody.classList.remove("no-scroll"),fcn_lightbox.classList.remove("show"))}))}));

View File

@ -14,7 +14,8 @@ fcn_theBody.addEventListener(
e => {
// Search for eligible source...
let target = e.target.closest('[data-lightbox]'),
valid = false;
valid = false,
img = null;
// If found...
if (target) {
@ -26,17 +27,21 @@ fcn_theBody.addEventListener(
// Image or link?
if (target.tagName == 'IMG') {
fcn_lightboxTarget.appendChild(target.cloneNode());
img = target.cloneNode();
valid = true;
} else if (target.href) {
let img = document.createElement('img');
img.src = target.href;
fcn_lightboxTarget.appendChild(img);
valid = true;
}
// Stop scrolling and show lightbox
if (valid) {
if (valid && img) {
img.removeAttribute('class');
img.removeAttribute('style');
img.removeAttribute('height');
img.removeAttribute('width');
fcn_lightboxTarget.appendChild(img);
fcn_theBody.classList.add('no-scroll');
fcn_lightbox.classList.add('show');
}

View File

@ -29,7 +29,6 @@
display: block;
max-height: calc(100vh - 4rem);
max-width: calc(100vw - 2rem);
width: fit-content;
object-fit: contain;
}
}