Merge pull request #1116 from samuel9554/Zoom_In_on_Photos

[Feature Request] Zoom In on Photos

package.json

@@ -76,7 +76,7 @@
     "screenfull": "^5.0.2",
     "shaka-player": "^2.5.10",
     "sortablejs": "^1.10.2",
-    "swiper": "^5.3.1",
+    "swiper": "^5.3.7",
     "webcomponents.js": "^0.7.24",
     "whatwg-fetch": "^3.0.0"
   },

src/components/slideshow/slideshow.js

@@ -258,6 +258,11 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
                     direction: 'horizontal',
                     // Loop is disabled due to the virtual slides option not supporting it.
                     loop: false,
+                    zoom: {
+                        minRatio: 1,
+                        toggle: true,
+                        containerClass: 'slider-zoom-container'
+                    },
                     autoplay: !options.interactive,
                     keyboard: {
                         enabled: true

src/components/slideshow/style.css

@@ -41,17 +41,12 @@
 }
 
 .swiper-slide-img {
-    width: auto;
+    width: 100%;
-    height: auto;
+    height: 100%;
-    max-width: 100%;
+    display: flex;
-    max-height: 100%;
+    justify-content: center;
-    -ms-transform: translate(-50%, -50%);
+    align-items: center;
-    -webkit-transform: translate(-50%, -50%);
+    text-align: center;
-    -moz-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-    position: absolute;
-    left: 50%;
-    top: 50%;
 }
 
 .slideshowButtonIcon {
@@ -138,3 +133,12 @@
 .slideSubtitle {
     color: #ccc;
 }
+
+.swiper-slide {
+    display: flex;
+    flex-direction: column;
+}
+
+.slider-zoom-container {
+    margin: auto;
+}