Update photo icon

src/web/Photo/index.html

@@ -912,13 +912,60 @@
     }
 
     // Navigation functionality
+
+    // Find a rendered .imagecard DOM element by its filepath
+    function findCardByFilepath(filepath) {
+        const cards = document.querySelectorAll('#viewbox .imagecard[filedata]');
+        for (const card of cards) {
+            try {
+                const fd = JSON.parse(decodeURIComponent(card.getAttribute('filedata')));
+                if (fd.filepath === filepath) return card;
+            } catch(e) {}
+        }
+        return null;
+    }
+
+    // Navigate to an image at a given index in allImages, loading more DOM cards if needed
+    function navigateToAllImagesIndex(app, idx) {
+        const imgData = app.allImages[idx];
+        const el = findCardByFilepath(imgData.filepath);
+        if (el) {
+            showImage(el);
+            return;
+        }
+        // The card is not yet in the DOM — extend the rendered slice to cover it
+        const newCount = Math.min(idx + 1 + PAGE_SIZE, app.allImages.length);
+        app.images = app.allImages.slice(0, newCount);
+        app.hasMoreImages = app.images.length < app.allImages.length;
+        app.isLoadingMore = false;
+        // Wait for Alpine to render the new cards, then show the target image
+        app.$nextTick(() => {
+            const el2 = findCardByFilepath(imgData.filepath);
+            if (el2) showImage(el2);
+        });
+    }
+
     function showPreviousImage() {
+        const appEl = document.querySelector('[x-data*="photoListObject"]');
+        if (appEl && appEl._x_dataStack && currentPhotoAllIndex > 0) {
+            navigateToAllImagesIndex(appEl._x_dataStack[0], currentPhotoAllIndex - 1);
+            return;
+        }
+        // Fallback to DOM-based navigation
         if (typeof prePhoto !== 'undefined' && prePhoto != null) {
             showImage(prePhoto);
         }
     }
 
     function showNextImage() {
+        const appEl = document.querySelector('[x-data*="photoListObject"]');
+        if (appEl && appEl._x_dataStack && currentPhotoAllIndex >= 0) {
+            const app = appEl._x_dataStack[0];
+            if (currentPhotoAllIndex + 1 >= app.allImages.length) return; // already at end
+            navigateToAllImagesIndex(app, currentPhotoAllIndex + 1);
+            return;
+        }
+        // Fallback to DOM-based navigation
         if (typeof nextPhoto !== 'undefined' && nextPhoto != null) {
             showImage(nextPhoto);
         }
@@ -927,7 +974,15 @@
     function updateNavigationButtons() {
         const prevBtn = document.getElementById('prev-btn');
         const nextBtn = document.getElementById('next-btn');
-        
+
+        const appEl = document.querySelector('[x-data*="photoListObject"]');
+        if (appEl && appEl._x_dataStack && currentPhotoAllIndex >= 0) {
+            const app = appEl._x_dataStack[0];
+            if (prevBtn) prevBtn.disabled = (currentPhotoAllIndex <= 0);
+            if (nextBtn) nextBtn.disabled = (currentPhotoAllIndex >= app.allImages.length - 1);
+            return;
+        }
+        // Fallback
         if (prevBtn) {
             prevBtn.disabled = (typeof prePhoto === 'undefined' || prePhoto == null || !$(prePhoto).hasClass("imagecard"));
         }

src/web/Photo/photo.js

@@ -13,6 +13,7 @@ let photoList = [];
 let prePhoto = "";
 let nextPhoto = "";
 let currentModel = "";
+let currentPhotoAllIndex = -1; // index of current photo in allImages (full server list)
 let isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 
 // Check if image should use compression (only JPG/PNG)
@@ -259,7 +260,11 @@ function ShowModal(){
 
 function closeViewer(){
     $('#photo-viewer').hide();
-    window.location.hash = '';
+    if (!ao_module_virtualDesktop){
+        // Only update hash if not under WebDesktop mode 
+        // to prevent iframe refresh
+        window.location.hash = '';
+    }
     ao_module_setWindowTitle("Photo");
 
     setTimeout(function(){
@@ -409,15 +414,29 @@ function showImage(object){
             prePhoto = null;
         }
 
+        // Track position in the full allImages list for index-based navigation
+        const _appEl = document.querySelector('[x-data*="photoListObject"]');
+        if (_appEl && _appEl._x_dataStack) {
+            const _app = _appEl._x_dataStack[0];
+            currentPhotoAllIndex = _app.allImages.findIndex(img => img.filepath === fd.filepath);
+
+            // Proactively load next batch when within PAGE_SIZE of the end of rendered images
+            if (currentPhotoAllIndex >= 0 && _app.hasMoreImages &&
+                    currentPhotoAllIndex >= _app.images.length - PAGE_SIZE) {
+                _app.loadMoreImages();
+            }
+        }
+
         // Update navigation buttons state
         if (typeof updateNavigationButtons === 'function') {
             updateNavigationButtons();
         }
 
         ao_module_setWindowTitle("Photo - " + fd.filename);
-
-        window.location.hash = encodeURIComponent(JSON.stringify({filename: fd.filename, filepath: fd.filepath}));
-
+        if (!ao_module_virtualDesktop){
+            window.location.hash = encodeURIComponent(JSON.stringify({filename: fd.filename, filepath: fd.filepath}));
+        }
+        
         // Check for EXIF data
         fetch(ao_root + "system/ajgi/interface?script=Photo/backend/getExif.js", {
             method: 'POST',
@@ -454,13 +473,17 @@ $(document).on("keydown", function(e){
         }
     } else if (e.keyCode == 37){
         //Left
-        if (prePhoto != null){
+        if (typeof showPreviousImage === 'function') {
+            showPreviousImage();
+        } else if (prePhoto != null){
             showImage(prePhoto);
         }
        
     }else if (e.keyCode == 39){
         //Right
-        if (nextPhoto != null){
+        if (typeof showNextImage === 'function') {
+            showNextImage();
+        } else if (nextPhoto != null){
             showImage(nextPhoto);
         }