fixes for image viewer

static/css/style.css

@@ -1542,6 +1542,70 @@ p {
         box-shadow: 0 0 10px var(--box-shadow);
 }
 
+
+#image-viewer-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0,0,0,0.9);
+    z-index: 999;
+    display: none;
+    justify-content: center;
+    align-items: center;
+}
+
+#image-viewer {
+    position: relative;
+    max-width: 80%;
+    max-height: 80%;
+    background: var(--search-bg);
+    padding: 20px;
+    box-sizing: border-box;
+    overflow: hidden;
+    text-align: center;
+}
+
+#viewer-image {
+    max-width: 100%;
+    max-height: 60vh;
+}
+
+#viewer-title {
+    font-size: 18px;
+    color: var(--text-color);
+    margin-bottom: 10px;
+}
+
+#viewer-source-button {
+    color: var(--link);
+    text-decoration: none;
+    font-size: 16px;
+}
+
+.image-view-close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.image-view-close .btn-nostyle {
+    margin-left: 5px;
+}
+
+#viewer-close-button,
+#viewer-prev-button,
+#viewer-next-button {
+    color: var(--text-color);
+    font-size: 36px;
+    cursor: pointer;
+    user-select: none;
+}
+
 body, h1, p, a, input, button {
     color: var(--text-color); /* Applies the text color based on theme */
     background-color: var(--background-color); /* Applies the background color based on theme */
@@ -1998,76 +2062,3 @@ body, h1, p, a, input, button {
         --box-shadow: #ffffff20; 
     }
 } */
-
-        /* Image Viewer Overlay */
-        #image-viewer-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0,0,0,0.9);
-            z-index: 999;
-            display: none;
-            justify-content: center;
-            align-items: center;
-        }
-
-        #image-viewer {
-            position: relative;
-            max-width: 80%;
-            max-height: 80%;
-            background: var(--search-bg);
-            padding: 20px;
-            box-sizing: border-box;
-            overflow: hidden;
-            text-align: center;
-        }
-
-        #viewer-image {
-            max-width: 100%;
-            max-height: 60vh;
-        }
-
-        #viewer-info {
-            margin-top: 15px;
-        }
-
-        #viewer-title {
-            font-size: 18px;
-            color: var(--text-color);
-            margin-bottom: 10px;
-        }
-
-        #viewer-source-button {
-            color: var(--link);
-            text-decoration: none;
-            font-size: 16px;
-        }
-
-        #viewer-close-button,
-        #viewer-prev-button,
-        #viewer-next-button {
-            position: absolute;
-            top: 10px;
-            color: #fff;
-            font-size: 36px;
-            cursor: pointer;
-            user-select: none;
-        }
-
-        #viewer-close-button {
-            right: 10px;
-        }
-
-        #viewer-prev-button {
-            left: 10px;
-            top: 50%;
-            transform: translateY(-50%);
-        }
-
-        #viewer-next-button {
-            right: 10px;
-            top: 50%;
-            transform: translateY(-50%);
-        }

templates/images.html

@@ -117,24 +117,24 @@
     <script defer src="/static/js/autocomplete.js"></script>
     <script defer src="/static/js/imagetitletrim.js"></script>
     <script>
-document.addEventListener('DOMContentLoaded', function() {
+        document.addEventListener('DOMContentLoaded', function() {
             let viewerOpen = false;
 
             const viewerOverlay = document.getElementById('image-viewer-overlay');
             viewerOverlay.innerHTML = `
                 <div id="image-viewer" class="image_view image_hide">
                     <div class="image-view-close">
-                <button class="btn-nostyle">
+                        <!-- <button class="btn-nostyle">
                             <div id="viewer-prev-button" class="material-icons-round icon_visibility clickable image-before">navigate_before</div>
                         </button>
                         <button class="btn-nostyle">
                             <div id="viewer-next-button" class="material-icons-round icon_visibility clickable image-next">navigate_next</div>
-                </button>
+                        </button> FIX THIS LATER! --!>
                         <button class="btn-nostyle">
                             <div id="viewer-close-button" class="material-icons-round icon_visibility clickable image-close">close</div>
                         </button>
                     </div>
-            <a class="image-viewer-link clickable" href="">
+                    <a class="image-viewer-link">
                         <div class="view-image" id="viewer-image-container">
                             <img id="viewer-image" class="view-image-img" src="" alt="">
                         </div>
@@ -144,6 +144,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     <p>
                         <a class="full-size" href="#">Show source website</a>
                         <a class="proxy-size" href="#">Show in fullscreen</a>
+                    </p>
                 </div>
             `;
 
@@ -154,9 +155,10 @@ document.addEventListener('DOMContentLoaded', function() {
                 if (!parentImageDiv) return;
 
                 const imgElement = parentImageDiv.querySelector('img.clickable');
-        const mediaUrl = imgElement.dataset.media;
+                const mediaUrl = imgElement.dataset.media; // Full-size image URL
+                const proxyMediaUrl = imgElement.dataset.proxyMedia || imgElement.src; // Proxied full-size image URL or thumbnail proxy
                 const title = imgElement.alt;
-        const sourceUrl = parentImageDiv.querySelector('.img_source').href;
+                const sourceUrl = parentImageDiv.querySelector('.img_source').href; // Source website URL
 
                 if (!mediaUrl || viewerOpen) {
                     return;  // Don't open if data is missing or viewer is already open
@@ -166,10 +168,15 @@ document.addEventListener('DOMContentLoaded', function() {
                 const viewerImage = document.getElementById('viewer-image');
                 const viewerTitle = document.getElementById('viewer-title');
                 const viewerSourceButton = document.getElementById('viewer-source-button');
+                const fullSizeLink = imageView.querySelector('.full-size');
+                const proxySizeLink = imageView.querySelector('.proxy-size');
 
                 viewerImage.src = mediaUrl;
                 viewerTitle.textContent = title;
                 viewerSourceButton.href = sourceUrl;
+                fullSizeLink.href = sourceUrl; // Link to the source website
+                proxySizeLink.href = proxyMediaUrl; // Link to the proxied full-size image
+
                 viewerOverlay.style.display = 'flex';
                 imageView.classList.remove('image_hide');
                 imageView.classList.add('image_show');
@@ -209,7 +216,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     }
                 }
             });
-});
+        });
     </script>
     <script>
         // Check if JavaScript is enabled and modify the DOM accordingly