diff --git a/app/assets/javascripts/discourse/lib/lightbox.js b/app/assets/javascripts/discourse/lib/lightbox.js
index 8f6cb58aa73..8b800bacc2c 100644
--- a/app/assets/javascripts/discourse/lib/lightbox.js
+++ b/app/assets/javascripts/discourse/lib/lightbox.js
@@ -8,14 +8,32 @@
Discourse.Lightbox = {
apply: function($elem) {
$LAB.script("/javascripts/jquery.magnific-popup-min.js").wait(function() {
- $('a.lightbox', $elem).each(function(i, e) {
+ $("a.lightbox", $elem).each(function(i, e) {
$(e).magnificPopup({
- type: 'image',
- closeOnContentClick: true,
+ type: "image",
+ closeOnContentClick: false,
+
+ callbacks: {
+ open: function() {
+ var self = this,
+ 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);
+ });
+ },
+ beforeClose: function() {
+ this.wrap.off("click.pinhandler");
+ this.wrap.removeClass("mfp-force-scrollbars");
+ }
+ },
image: {
titleSrc: function(item) {
- return item.el.attr('title') + ' · ' + I18n.t("lightbox.download") + '';
+ return item.el.attr("title") + ' · ' + I18n.t("lightbox.download") + '';
}
}
diff --git a/app/assets/stylesheets/desktop/magnific-popup.scss b/app/assets/stylesheets/desktop/magnific-popup.scss
index 43b07f76837..5992b56a467 100644
--- a/app/assets/stylesheets/desktop/magnific-popup.scss
+++ b/app/assets/stylesheets/desktop/magnific-popup.scss
@@ -639,3 +639,14 @@ button {
}
}
}
+
+
+.mfp-force-scrollbars {
+ &.mfp-wrap {
+ overflow-y: auto !important;
+ overflow-x: auto !important;
+ }
+ .mfp-img {
+ max-width: none;
+ }
+}