diff --git a/app/assets/javascripts/discourse/app/lib/lightbox.js b/app/assets/javascripts/discourse/app/lib/lightbox.js
index 28563fb06d5..a4d2e52d33d 100644
--- a/app/assets/javascripts/discourse/app/lib/lightbox.js
+++ b/app/assets/javascripts/discourse/app/lib/lightbox.js
@@ -8,16 +8,21 @@ import User from "discourse/models/user";
 import loadScript from "discourse/lib/load-script";
 import { renderIcon } from "discourse-common/lib/icon-library";
 import { spinnerHTML } from "discourse/helpers/loading-spinner";
+import { helperContext } from "discourse-common/lib/helpers";
 
 export default function (elem, siteSettings) {
   if (!elem) {
     return;
   }
 
+  const caps = helperContext().capabilities;
+  const imageClickNavigation = caps.touch;
+
   loadScript("/javascripts/jquery.magnific-popup.min.js").then(function () {
     const lightboxes = elem.querySelectorAll(
       "*:not(.spoiler):not(.spoiled) a.lightbox"
     );
+
     $(lightboxes).magnificPopup({
       type: "image",
       closeOnContentClick: false,
@@ -31,6 +36,7 @@ export default function (elem, siteSettings) {
         tPrev: I18n.t("lightbox.previous"),
         tNext: I18n.t("lightbox.next"),
         tCounter: I18n.t("lightbox.counter"),
+        navigateByImgClick: imageClickNavigation,
       },
 
       ajax: {
@@ -39,17 +45,19 @@ export default function (elem, siteSettings) {
 
       callbacks: {
         open() {
-          const wrap = this.wrap,
-            img = this.currItem.img,
-            maxHeight = img.css("max-height");
+          if (!imageClickNavigation) {
+            const wrap = this.wrap,
+              img = this.currItem.img,
+              maxHeight = img.css("max-height");
 
-          wrap.on("click.pinhandler", "img", function () {
-            wrap.toggleClass("mfp-force-scrollbars");
-            img.css(
-              "max-height",
-              wrap.hasClass("mfp-force-scrollbars") ? "none" : maxHeight
-            );
-          });
+            wrap.on("click.pinhandler", "img", function () {
+              wrap.toggleClass("mfp-force-scrollbars");
+              img.css(
+                "max-height",
+                wrap.hasClass("mfp-force-scrollbars") ? "none" : maxHeight
+              );
+            });
+          }
 
           if (isAppWebview()) {
             postRNWebviewMessage(
@@ -58,6 +66,9 @@ export default function (elem, siteSettings) {
             );
           }
         },
+        change() {
+          this.wrap.removeClass("mfp-force-scrollbars");
+        },
         beforeClose() {
           this.wrap.off("click.pinhandler");
           this.wrap.removeClass("mfp-force-scrollbars");