up

conversations.php

@@ -1378,7 +1378,7 @@
                         }
                         return `
                             <div class="message-media">
-                                <a href="${full}" target="_blank" rel="noopener noreferrer">
+                                <a href="#" onclick="openImageLightbox(${JSON.stringify(full)}); return false;" title="Abrir imagen">
                                     <img src="${thumb}" alt="Imagen" style="cursor:zoom-in">
                                 </a>
                             </div>

index.php

@@ -733,8 +733,33 @@ try {
                     actionsDiv.style.display = 'none';
                 });
         }
+
+        // Lightbox helper para imágenes (abre un modal Bootstrap con la imagen en grande)
+        function openImageLightbox(url, caption = '') {
+            let img = document.getElementById('imageLightboxImg');
+            let cap = document.getElementById('imageLightboxCaption');
+            if (!img || !cap) return; // seguridad
+            img.src = url;
+            cap.textContent = caption || '';
+            const modalEl = document.getElementById('imageLightboxModal');
+            const bsModal = new bootstrap.Modal(modalEl);
+            bsModal.show();
+        }
     </script>
 
+    <!-- Lightbox Modal -->
+    <div class="modal fade" id="imageLightboxModal" tabindex="-1" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-lg">
+            <div class="modal-content bg-transparent border-0">
+                <div class="modal-body p-0 position-relative">
+                    <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" aria-label="Cerrar" style="z-index:10;"></button>
+                    <img id="imageLightboxImg" src="" class="img-fluid w-100" style="border-radius:10px;">
+                    <div id="imageLightboxCaption" class="mt-2 text-center text-white small"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Modal para crear menú -->
     <div class="modal fade" id="createMenuModal" tabindex="-1" aria-labelledby="createMenuModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-lg">