improved Modal with zoom and pagination. also implementing thumbnail generation

app/templates/layout.html

@@ -31,15 +31,15 @@
 
 
   <!-- FLASH MESSAGES -->
-  {% with messages = get_flashed_messages(with_categories=true) %}
-    {% if messages %}
+{% with messages = get_flashed_messages(with_categories=true) %}
+  {% if messages %}
+    <div class="flash-container">
       {% for category, message in messages %}
-        <div class="flash {{ category }}">
-          {{ message }}
-        </div>
+        <div class="flash flash-{{ category }}">{{ message }}</div>
       {% endfor %}
-    {% endif %}
-  {% endwith %}
+    </div>
+  {% endif %}
+{% endwith %}
 
   <hr>
 
@@ -49,86 +49,30 @@
   </div>
 </div>
 
+{% if request.endpoint == 'main.gallery' or request.endpoint == 'main.artist_gallery' %}
+  <input type="hidden" id="hasNextPage" value="{{ has_next|lower }}">
+  <input type="hidden" id="nextPageUrl" value="{{ next_page_url }}">
+  <input type="hidden" id="hasPrevPage" value="{{ has_prev|lower }}">
+  <input type="hidden" id="prevPageUrl" value="{{ prev_page_url }}">
+{% endif %}
+
+
 <!-- Modal -->
 <div id="imageModal" class="modal">
-  <div class="modal-dialog modal-xl modal-dialog-centered">
-    <div class="modal-content bg-transparent border-0">
-      <button id="modalClose" class="modal-button modal-close">✕</button>
-      <button id="modalPrev" class="modal-button modal-prev">←</button>
-      <button id="modalNext" class="modal-button modal-next">→</button>
-      <div class="modal-body">
-        <h5 id="modalFilename" class="modal-filename"></h5>
-        <img id="modalImage" src="" class="img-fluid">
+  <div class="modal-content">
+    <!-- Navigation buttons -->
+    <button id="modalPrev" class="modal-button modal-prev">←</button>
+    <button id="modalNext" class="modal-button modal-next">→</button>
+
+    <div class="modal-body">
+      <div id="modalImageWrapper" class="modal-image-wrapper">
+        <img id="modalImage" src="" alt="Full View">
       </div>
     </div>
   </div>
 </div>
 
-
-
-<script>
-  document.addEventListener('DOMContentLoaded', () => {
-    const modal = document.getElementById('imageModal');
-    const modalImage = document.getElementById('modalImage');
-    const modalClose = document.getElementById('modalClose');
-    const modalPrev = document.getElementById('modalPrev');
-    const modalNext = document.getElementById('modalNext');
-    const modalFilename = document.getElementById('modalFilename');
-    const images = Array.from(document.querySelectorAll('.img-clickable'));
-
-    let currentIndex = -1;
-
-    function openModal(index) {
-      currentIndex = index;
-      const img = images[currentIndex];
-      modalImage.src = img.dataset.full;
-      modalFilename.textContent = img.dataset.filename || '';
-      modal.classList.add('active');
-    }
-
-    function closeModal() {
-      modal.classList.remove('active');
-      modalImage.src = '';
-      modalFilename.textContent = '';
-      currentIndex = -1;
-    }
-
-    function showNext() {
-      if (images.length === 0) return;
-      currentIndex = (currentIndex + 1) % images.length;
-      const img = images[currentIndex];
-      modalImage.src = img.dataset.full;
-      modalFilename.textContent = img.dataset.filename || '';
-    }
-
-    function showPrev() {
-      if (images.length === 0) return;
-      currentIndex = (currentIndex - 1 + images.length) % images.length;
-      const img = images[currentIndex];
-      modalImage.src = img.dataset.full;
-      modalFilename.textContent = img.dataset.filename || '';
-    }
-
-    images.forEach((img, index) => {
-      img.addEventListener('click', () => openModal(index));
-    });
-
-    modalClose.addEventListener('click', closeModal);
-    modalNext.addEventListener('click', showNext);
-    modalPrev.addEventListener('click', showPrev);
-
-    modal.addEventListener('click', (e) => {
-      if (e.target === modal) closeModal();
-    });
-
-    document.addEventListener('keydown', (e) => {
-      if (!modal.classList.contains('active')) return;
-      if (e.key === 'ArrowRight') showNext();
-      else if (e.key === 'ArrowLeft') showPrev();
-      else if (e.key === 'Escape') closeModal();
-    });
-  });
-</script>
+<script src="{{ url_for('static', filename='js/modal-pagination.js') }}"></script>
 
 </body>
 </html>