From 84bfaba9fe3754a5b6c008d9e2eb2e6a7b182c24 Mon Sep 17 00:00:00 2001
From: samuel9554 <samuel95_54@hotmail.com>
Date: Wed, 22 Apr 2020 15:50:33 -0400
Subject: [PATCH] Added feature Zoom in on Photo

---
 package.json                          |  2 +-
 src/components/slideshow/slideshow.js |  5 +++++
 src/components/slideshow/style.css    | 17 ++++++-----------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index bc8089947f..fd7d445d1b 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/components/slideshow/slideshow.js b/src/components/slideshow/slideshow.js
index d2bf1bb727..48ccee21c8 100644
--- a/src/components/slideshow/slideshow.js
+++ b/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
diff --git a/src/components/slideshow/style.css b/src/components/slideshow/style.css
index 2bea7c9696..876c78510a 100644
--- a/src/components/slideshow/style.css
+++ b/src/components/slideshow/style.css
@@ -41,17 +41,12 @@
 }
 
 .swiper-slide-img {
-    width: auto;
-    height: auto;
-    max-width: 100%;
-    max-height: 100%;
-    -ms-transform: translate(-50%, -50%);
-    -webkit-transform: translate(-50%, -50%);
-    -moz-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-    position: absolute;
-    left: 50%;
-    top: 50%;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
 }
 
 .slideshowButtonIcon {