Better zoom

Author: rrMat

assets/css/main.css

@@ -2352,6 +2352,12 @@ button,
   opacity: 0.9;
 }
 
+.image.fit img,
+.image.main img {
+  max-width: 400px;
+  height: auto;
+  object-fit: cover;
+
 /* Prevent body scroll when modal is open */
 body.modal-open {
   overflow: hidden;

assets/js/image-modal.js

@@ -6,17 +6,36 @@
         var modalImg = $('#modalImage');
         var captionText = $('#caption');
         var closeBtn = $('.close');
+        
+        // Transform state
         var scale = 1;
+        var translateX = 0;
+        var translateY = 0;
         var minScale = 0.5;
         var maxScale = 5;
+        
+        // Dragging state
+        var isDragging = false;
+        var lastX = 0;
+        var lastY = 0;
+
+        function updateTransform() {
+            modalImg.css('transform', `scale(${scale}) translate(${translateX}px, ${translateY}px)`);
+        }
+
+        function resetTransform() {
+            scale = 1;
+            translateX = 0;
+            translateY = 0;
+            updateTransform();
+        }
 
         // Add click event to all images
         $('.image.fit img, .image.main img').on('click', function() {
             modal.show();
             modalImg.attr('src', this.src);
             captionText.text($(this).attr('alt'));
-            scale = 1; // Reset zoom
-            modalImg.css('transform', 'scale(' + scale + ')');
+            resetTransform();
         });
 
         // Mouse wheel zoom
@@ -26,20 +45,88 @@
             var zoomSpeed = 0.1;
 
             if (delta < 0) {
-                // Zoom in
                 scale = Math.min(maxScale, scale + zoomSpeed);
             } else {
-                // Zoom out
                 scale = Math.max(minScale, scale - zoomSpeed);
             }
 
-            $(this).css('transform', 'scale(' + scale + ')');
+            updateTransform();
+        });
+
+        // Mouse drag events
+        modalImg.on('mousedown', function(e) {
+            if (scale > 1) {
+                isDragging = true;
+                lastX = e.clientX;
+                lastY = e.clientY;
+                $(this).css('cursor', 'grabbing');
+                e.preventDefault();
+            }
+        });
+
+        $(document).on('mousemove', function(e) {
+            if (isDragging) {
+                var deltaX = e.clientX - lastX;
+                var deltaY = e.clientY - lastY;
+                
+                translateX += deltaX;
+                translateY += deltaY;
+                
+                lastX = e.clientX;
+                lastY = e.clientY;
+                
+                updateTransform();
+            }
+        });
+
+        $(document).on('mouseup', function() {
+            if (isDragging) {
+                isDragging = false;
+                modalImg.css('cursor', scale > 1 ? 'grab' : 'pointer');
+            }
         });
 
-        // Double-click to reset zoom
+        // Touch events for mobile
+        var lastTouchX = 0;
+        var lastTouchY = 0;
+
+        modalImg.on('touchstart', function(e) {
+            if (scale > 1 && e.touches.length === 1) {
+                isDragging = true;
+                lastTouchX = e.touches[0].clientX;
+                lastTouchY = e.touches[0].clientY;
+                e.preventDefault();
+            }
+        });
+
+        modalImg.on('touchmove', function(e) {
+            if (isDragging && e.touches.length === 1) {
+                var deltaX = e.touches[0].clientX - lastTouchX;
+                var deltaY = e.touches[0].clientY - lastTouchY;
+                
+                translateX += deltaX;
+                translateY += deltaY;
+                
+                lastTouchX = e.touches[0].clientX;
+                lastTouchY = e.touches[0].clientY;
+                
+                updateTransform();
+                e.preventDefault();
+            }
+        });
+
+        modalImg.on('touchend', function() {
+            isDragging = false;
+        });
+
+        // Double-click to reset
         modalImg.on('dblclick', function() {
-            scale = 1;
-            $(this).css('transform', 'scale(' + scale + ')');
+            resetTransform();
+        });
+
+        // Update cursor based on zoom level
+        modalImg.on('load', function() {
+            $(this).css('cursor', scale > 1 ? 'grab' : 'pointer');
         });
 
         // Close modal events

experiments/umbrella-girl.html

@@ -210,10 +210,6 @@ <h2>Generation Timings</h2>
 												<tr><td>NAG + Daemon + Hyper</td><td>87.64s</td></tr>
 												<tr><td>NAG + Daemon + Tea</td><td>180.52s</td></tr>
 												<tr><td>NAG + Daemon + Hyper + Tea</td><td>73.29s</td></tr>
-												<tr><td>NAG + Daemon + DEIS</td><td>178.81s</td></tr>
-												<tr><td>NAG + Daemon + Hyper + DEIS</td><td>73.25s</td></tr>
-												<tr><td>NAG + Daemon + Tea + DEIS</td><td>182.49s</td></tr>
-												<tr><td>All Features + DEIS</td><td>73.29s</td></tr>
 											</tbody>
 										</table>
 									</div>