Tipp

backend/templates/gallery.html

@@ -40,6 +40,7 @@
     <button class="lightbox-nav lightbox-prev" type="button" aria-label="Previous image">‹</button>
     <img class="lightbox-image" id="lightbox-image" alt="" />
     <button class="lightbox-nav lightbox-next" type="button" aria-label="Next image">›</button>
+    <div class="lightbox-save-hint" id="lightbox-save-hint" role="status">{{ t('gallery_save_hint') }}</div>
   </div>
 
   <script>
@@ -48,6 +49,7 @@
       const lightboxImage = document.getElementById("lightbox-image");
       const lightboxDownload = document.getElementById("lightbox-download");
       const lightboxCounter = document.getElementById("lightbox-counter");
+      const saveHint = document.getElementById("lightbox-save-hint");
       const closeBtn = lightbox.querySelector(".lightbox-close");
       const prevBtn = lightbox.querySelector(".lightbox-prev");
       const nextBtn = lightbox.querySelector(".lightbox-next");
@@ -67,6 +69,7 @@
       let touchStartY = 0;
       let didSwipe = false;
       let controlsTimer = null;
+      let hintTimer = null;
 
       const scheduleHideControls = () => {
         clearTimeout(controlsTimer);
@@ -105,6 +108,9 @@
         lightbox.setAttribute("aria-hidden", "false");
         document.body.classList.add("no-scroll");
         showControlsTemporarily();
+        saveHint.classList.add("is-visible");
+        clearTimeout(hintTimer);
+        hintTimer = window.setTimeout(() => saveHint.classList.remove("is-visible"), 5000);
       };
 
       const closeLightbox = () => {
@@ -113,6 +119,8 @@
         document.body.classList.remove("no-scroll");
         lightbox.classList.remove("lightbox-controls-hidden");
         clearTimeout(controlsTimer);
+        clearTimeout(hintTimer);
+        saveHint.classList.remove("is-visible");
       };
 
       openButtons.forEach((link) => {