Fix #91: Allow Zoom In, into images

CHANGELOG-DEV.md

@@ -8,6 +8,7 @@ HumHub Changelog
 - Fix #6468: Module Administration - Marketplace Links broken without Pretty URLs
 - Enh #6469: Added Info text for Marketplace page 
 - Fix #112: Reorder Table Rows
+- Fix #91: Allow Zoom In, into images
 
 1.15.0-beta.1 (July 31, 2023)
 -----------------------------

static/js/humhub/humhub.ui.gallery.js

@@ -4,12 +4,14 @@
  * @param {type} param2
  */
 humhub.module('ui.gallery', function (module, require, $) {
+    var lastTap = 0;
+    var timeout;
 
     var init = function () {
         $(document).on('click.humhub:ui:gallery', '[data-ui-gallery]', function (evt) {
             var $this = $(this);
 
-            if($this.is('img') && $this.closest('a').length) {
+            if ($this.is('img') && $this.closest('a').length) {
                 return;
             }
 
@@ -20,11 +22,30 @@ humhub.module('ui.gallery', function (module, require, $) {
             var $links = (gallery) ? $('[data-ui-gallery="' + gallery + '"]') : $this.parent().find('[data-ui-gallery]');
             var options = {index: $this[0], event: evt.originalEvent};
 
-            if($this.is('img')) {
+            if ($this.is('img')) {
                 options['urlProperty'] = 'src';
             }
             blueimp.Gallery($links.get(), options);
         });
+
+        // Zooming in on small images by double-tap or double-click
+        $('#blueimp-gallery').on('touchend click', '.slides .slide > img', function (evt) {
+            var currentTime = new Date().getTime();
+            var tapLength = currentTime - lastTap;
+
+            evt.preventDefault();
+            clearTimeout(timeout);
+
+            if (tapLength < 500 && tapLength > 0) {
+                $(evt.target).toggleClass('contain-img');
+            } else {
+                timeout = setTimeout(function () {
+                    clearTimeout(timeout);
+                }, 500);
+            }
+
+            lastTap = currentTime;
+        });
     };
 
     module.export({

static/less/media.less

@@ -134,14 +134,26 @@
 }
 
 #blueimp-gallery {
-    .slide {
-        img {
-            max-height: 80%;
+    .slides, .slide {
+        height: 100%;
+        max-height: 100%;
+        max-width: 100%;
+        min-width: 100%;
+    }
+
+    .slide > img {
+        max-height: 90%;
+        max-width: 100%;
+
+        &.contain-img {
+            height: 90%;
+            width: 100%;
+            object-fit: contain;
+            object-position: center;
         }
     }
 }
 
-
 audio, canvas, progress, video {
     display: inline-block;
     vertical-align: baseline;