franzz/livetrail
1
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

Fix lightbox multi-loading

Browse Source
This commit is contained in:
franzz
2026-05-07 16:58:52 +02:00
parent 7aaaff7dda
commit e6d11f424d
3 changed files with 56 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scripts/lightbox.js
+36 -38
View File
@@ -41,12 +41,12 @@ export default class Lightbox {
init() {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
this.enable();
this.build();
this.enable();
}, { once: true });
} else {
this.enable();
this.build();
this.enable();
}
}
@@ -66,41 +66,42 @@ export default class Lightbox {
}
build() {
if (document.getElementById('lightbox')) return;
const wrapper = document.createElement('div');
wrapper.innerHTML = `
<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div>
<div id="lightbox" tabindex="-1" class="lightbox">
<div class="lb-outerContainer">
<div class="lb-container">
<img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" />
<div class="lb-nav">
<div class="lb-prev-area">
<a class="lb-prev" aria-label="Previous image" href="" role="button">${this.renderIcon('prev')}</a>
if (!document.getElementById('lightbox')) {
const wrapper = document.createElement('div');
wrapper.innerHTML = `
<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div>
<div id="lightbox" tabindex="-1" class="lightbox">
<div class="lb-outerContainer">
<div class="lb-container">
<img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" />
<video class="lb-video" controls autoplay></video>
<div class="lb-nav">
<div class="lb-prev-area">
<a class="lb-prev" aria-label="Previous image" href="" role="button">${this.renderIcon('prev')}</a>
</div>
<div class="lb-next-area">
<a class="lb-next" aria-label="Next image" href="" role="button">${this.renderIcon('next')}</a>
</div>
</div>
<div class="lb-next-area">
<a class="lb-next" aria-label="Next image" href="" role="button">${this.renderIcon('next')}</a>
<div class="lb-loader">
<a class="lb-cancel" href="#">${this.renderIcon('cancel')}</a>
</div>
</div>
<div class="lb-loader">
<a class="lb-cancel" href="#">${this.renderIcon('cancel')}</a>
</div>
<div class="lb-dataContainer desktop">
<div class="lb-data">
<div class="lb-details">
<span class="lb-caption"></span>
</div>
<div class="lb-closeContainer">
<a class="lb-close" href="#" role="button">${this.renderIcon('close')}</a>
</div>
</div>
</div>
</div>
<div class="lb-dataContainer desktop">
<div class="lb-data">
<div class="lb-details">
<span class="lb-caption"></span>
</div>
<div class="lb-closeContainer">
<a class="lb-close" href="#" role="button">${this.renderIcon('close')}</a>
</div>
</div>
</div>
</div>
`;
document.body.append(...wrapper.children);
`;
document.body.append(...wrapper.children);
}
this.overlay = document.getElementById('lightboxOverlay');
this.lightbox = document.getElementById('lightbox');
@@ -114,11 +115,7 @@ export default class Lightbox {
this.dataContainer = this.lightbox.querySelector('.lb-dataContainer');
this.prev = this.lightbox.querySelector('.lb-prev');
this.next = this.lightbox.querySelector('.lb-next');
this.video = document.createElement('video');
this.video.className = 'lb-video';
this.video.controls = true;
this.video.autoplay = true;
this.image.insertAdjacentElement('afterend', this.video);
this.video = this.lightbox.querySelector('.lb-video');
this.setVisible(this.overlay, false);
this.setVisible(this.lightbox, false);
@@ -538,6 +535,7 @@ export default class Lightbox {
}
setImageTransform(transform) {
if (!this.image) return;
this.image.style.setProperty('--scale', String(transform.scale));
this.image.style.setProperty('--translate-x', `${transform.translateX}px`);
this.image.style.setProperty('--translate-y', `${transform.translateY}px`);
@@ -580,8 +578,8 @@ export default class Lightbox {
end() {
this.disableKeyboardNav();
this.video.pause();
this.video.removeAttribute('src');
this.video?.pause();
this.video?.removeAttribute('src');
this.container.classList.remove('lb-video-nav', 'moveable', 'moving');
window.removeEventListener('resize', this.boundOnResize);
window.removeEventListener('mousemove', this.boundOnDragMove);