Hide lightbox loader after 1s

In case of images with transparency. Either it is loaded at this point or not, the loader has no relation to the image status anyway.
This commit is contained in:
Tetrakern 2025-01-11 17:57:30 +01:00
parent 9679d7d4fc
commit 0948428500
6 changed files with 14 additions and 7 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

8
js/complete.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -2993,6 +2993,7 @@ function fcn_loadConsentBanner() {
function fcn_showLightbox(target) { function fcn_showLightbox(target) {
const lightbox = _$$$('fictioneer-lightbox'); const lightbox = _$$$('fictioneer-lightbox');
const loader = lightbox.querySelector('.loader');
const lightboxContent = _$('.lightbox__content'); const lightboxContent = _$('.lightbox__content');
let valid = false; let valid = false;
@ -3000,6 +3001,7 @@ function fcn_showLightbox(target) {
// Cleanup previous content (if any) // Cleanup previous content (if any)
lightboxContent.innerHTML = ''; lightboxContent.innerHTML = '';
loader.style.opacity = 1;
// Bookmark source element for later use // Bookmark source element for later use
target.classList.add('lightbox-last-trigger'); target.classList.add('lightbox-last-trigger');
@ -3020,6 +3022,10 @@ function fcn_showLightbox(target) {
lightboxContent.appendChild(img); lightboxContent.appendChild(img);
lightbox.classList.add('show'); lightbox.classList.add('show');
setTimeout(() => {
loader.style.opacity = 0;
}, 1000);
const close = lightbox.querySelector('.lightbox__close'); const close = lightbox.querySelector('.lightbox__close');
close?.focus(); close?.focus();

View File

@ -45,5 +45,6 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
transition: opacity .3s;
} }
} }