diff --git a/app/assets/javascripts/discourse/lib/lightbox.js b/app/assets/javascripts/discourse/lib/lightbox.js index 8f6cb58aa..8b800bacc 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') + ' · <a class="image-source-link" href="' + item.src + '" target="_blank">' + I18n.t("lightbox.download") + '</a>'; + return item.el.attr("title") + ' · <a class="image-source-link" href="' + item.src + '" target="_blank">' + I18n.t("lightbox.download") + '</a>'; } } diff --git a/app/assets/stylesheets/desktop/magnific-popup.scss b/app/assets/stylesheets/desktop/magnific-popup.scss index 43b07f768..5992b56a4 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; + } +}