From d2598a83ef0fa8a031af22761b93a8f374880d3a Mon Sep 17 00:00:00 2001 From: Hendrik L Date: Wed, 3 Jul 2024 11:44:01 +0200 Subject: [PATCH 1/3] close lightbox on back, zoom and close on click --- app/static/js/scripts.js | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/app/static/js/scripts.js b/app/static/js/scripts.js index 609db8c2..16047939 100644 --- a/app/static/js/scripts.js +++ b/app/static/js/scripts.js @@ -88,9 +88,40 @@ function setupLightboxGallery() { function setupLightboxTeaser() { baguetteBox.run('.post_teaser', { fullScreen: false, + noScrollbars: true, async: true, preload: 3, ignoreClass: 'preview_image', + afterShow: function() { + var backButtonPrevented = false; + history.pushState(null, document.title, location.href); + function popStateListener(event) { + if (backButtonPrevented === false){ + history.pushState(null, document.title, location.href); + baguetteBox.hide(); + backButtonPrevented = true; + } else { + window.removeEventListener('popstate', popStateListener); + history.back(); + } + } + window.addEventListener('popstate', popStateListener); + + function baguetteBoxClickImg(event) { + if (this.style.width != "100%" && this.offsetWidth < window.innerWidth) { + this.style.width = "100%"; + this.style.maxHeight = "none"; + } else { + this.style.width = ""; + this.style.maxHeight = ""; + this.removeEventListener('click', baguetteBoxClickImg); + baguetteBox.hide(); + } + }; + for (const el of document.querySelectorAll('div#baguetteBox-overlay img')) { + el.addEventListener('click', baguetteBoxClickImg); + } + } }); } From 17c6c2512d5aff1dbbfc196ee85714cdd8d9c95b Mon Sep 17 00:00:00 2001 From: Hendrik L Date: Wed, 3 Jul 2024 14:40:56 +0200 Subject: [PATCH 2/3] allow zooming and scaling (drop user-scalable=no) --- app/templates/base.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/templates/base.html b/app/templates/base.html index 3e5ca850..c8342a82 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -28,7 +28,7 @@ {% block head -%} - + From 419d3415043710d921b66170936da7ce8cc0d950 Mon Sep 17 00:00:00 2001 From: Hendrik L Date: Wed, 3 Jul 2024 14:56:02 +0200 Subject: [PATCH 3/3] allow scrolling in lightbox --- app/static/js/scripts.js | 6 +++--- app/static/structure.css | 16 ++++++++++++++++ app/static/structure.scss | 16 ++++++++++++++++ 3 files changed, 35 insertions(+), 3 deletions(-) diff --git a/app/static/js/scripts.js b/app/static/js/scripts.js index 16047939..082cd1c9 100644 --- a/app/static/js/scripts.js +++ b/app/static/js/scripts.js @@ -108,8 +108,8 @@ function setupLightboxTeaser() { window.addEventListener('popstate', popStateListener); function baguetteBoxClickImg(event) { - if (this.style.width != "100%" && this.offsetWidth < window.innerWidth) { - this.style.width = "100%"; + if (this.style.width != "100vw" && this.offsetWidth < window.innerWidth) { + this.style.width = "100vw"; this.style.maxHeight = "none"; } else { this.style.width = ""; @@ -121,7 +121,7 @@ function setupLightboxTeaser() { for (const el of document.querySelectorAll('div#baguetteBox-overlay img')) { el.addEventListener('click', baguetteBoxClickImg); } - } + }, }); } diff --git a/app/static/structure.css b/app/static/structure.css index 667a2004..70d74587 100644 --- a/app/static/structure.css +++ b/app/static/structure.css @@ -1435,4 +1435,20 @@ h1 .warning_badge { word-wrap: break-word; } +#baguetteBox-overlay { + overflow: scroll !important; +} + +#baguetteBox-overlay .full-image { + height: auto !important; +} + +#baguetteBox-overlay .full-image figure { + display: inline-block !important; +} + +#baguetteBox-slider { + height: auto !important; +} + /*# sourceMappingURL=structure.css.map */ diff --git a/app/static/structure.scss b/app/static/structure.scss index 720f2bd8..0238db3e 100644 --- a/app/static/structure.scss +++ b/app/static/structure.scss @@ -1110,3 +1110,19 @@ h1 .warning_badge { .post_body, .comment_body { word-wrap: break-word; } + +#baguetteBox-overlay { + overflow: scroll !important; + .full-image { + height: auto !important; + //min-height: 100%; + figure { + display: inline-block !important; + } + } +} + +#baguetteBox-slider { + height: auto !important; + //min-height: 100%; +}