This is already available as a theme component. 
Hello,
My forum is really image heavy and I wanted to just make some changes in the default Magnific Popup lightbox to make it more friendly. I am not an expert but maybe is good for idea or someone more expert will make a Theme Component or something like that from this prototype. 
Thank you! 
What is the difference?
- Use black background
- Use fixed container (image always on screen)
- Remove paddings to view image in full window size
- Move all buttons under
.mfp-containerdiv - Fixed buttons (always visible on screen)
- Redesign buttons
- Add dedicated zoom button (especially useful when you in gallery view more images) With this button you can zoom in and out the current image.
- On my instance I hide the
.mfp-title(caption) text. But the download link is visible.
</head>
<script type="text/discourse-plugin" version="0.8.18">
$(document).ready(function() {
$("body").click(function() {
// Move close button under container div
$(".mfp-container").append($(".mfp-close"));
// Add zoom button
if($(".full-size-btn").length <= 0){
$(".mfp-container").append('<div class="full-size-btn mfp-prevent-close"><span class="plus-btn mfp-prevent-close" title="Zoom in image"><svg class="fa d-icon d-icon-plus svg-icon svg-node mfp-prevent-close" aria-hidden="true"><use xlink:href="#plus"></use></svg></span><span class="minus-btn mfp-prevent-close" title="Zoom out image"><svg class="fa d-icon d-icon-minus svg-icon svg-node mfp-prevent-close" aria-hidden="true"><use xlink:href="#minus"></use></svg></span></div>');
// If you click the zoom button toggle class
$(".full-size-btn").click(function () {
$(".mfp-wrap").toggleClass("mfp-full-size-scrollbars");
});
}
// Prevent zoom when you click the image
$(document).on("click", ".mfp-img", function() {
$(".mfp-img").css("max-height", $(window).height());
});
// If you zoom in and click the image or arrows than it goes to next image in normal size
$(".mfp-img, .mfp-arrow").click(function () {
if ($(".mfp-wrap").hasClass("mfp-full-size-scrollbars")) {
$(".mfp-wrap").removeClass("mfp-full-size-scrollbars");
}
});
});
});
</script>
COMMON / SCSS
.mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 1;
background-color: #000000;
}
.mfp-container {
position: fixed;
overflow: auto;
padding-left: 0px;
padding-right: 0px;
}
.mfp-figure {
&:after {
top: 0;
bottom: 0;
box-shadow: none;
}
}
img.mfp-img {
padding: 0;
}
.mfp-force-scrollbars {
.mfp-img {
max-width: 100%;
}
}
// Bottom bar
.mfp-bottom-bar {
margin-top: 0;
padding: 0.3em 0;
}
// Title
.mfp-title {
overflow: hidden;
white-space: nowrap;
visibility: hidden;
.image-source-link {
right: 6px;
position: absolute;
visibility: visible;
}
}
// Counter
.mfp-counter {
right: 10px;
top: -25px;
min-width: 40px;
color: #000000;
background: #ffffff;
border-radius: 4px;
opacity: .65;
font-weight: bold;
text-align: center;
}
// Buttons
.mfp-close-btn-in .mfp-close {
right: 15px;
top: 15px;
width: 44px;
height: 44px;
position: fixed;
text-align: center;
padding-right: 0;
background: #ffffff;
color: #000000;
border-radius: 50%;
-webkit-box-shadow: inset 0px 0px 0px 3px #000;
-moz-box-shadow: inset 0px 0px 0px 3px #000;
box-shadow: inset 0px 0px 0px 3px #000;
}
button.mfp-arrow {
background: #ffffff;
-webkit-transform: scale(0.55);
transform: scale(0.55);
border-radius: 50%;
width: 90px;
height: 90px;
-webkit-box-shadow: inset 0px 0px 0px 6px #000;
-moz-box-shadow: inset 0px 0px 0px 6px #000;
box-shadow: inset 0px 0px 0px 6px #000;
&:after {
top: -3px;
}
}
.mfp-arrow-left {
left: 3px;
&:before {
display: none;
}
&:after {
border-right: 17px solid #000;
margin-left: 30px;
}
}
.mfp-arrow-right {
right: 3px;
&:before {
display: none;
}
&:after {
border-left: 17px solid #000;
margin-left: 40px;
}
}
.full-size-btn {
left: 15px;
bottom: 25px;
width: 44px;
height: 44px;
position: fixed;
background-color: #fff;
border-radius: 50%;
color: #000;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-up-1);
z-index: 1046;
cursor: -moz-pointer;
cursor: -webkit-pointer;
cursor: pointer;
opacity: .65;
-webkit-box-shadow: inset 0px 0px 0px 3px #000;
-moz-box-shadow: inset 0px 0px 0px 3px #000;
box-shadow: inset 0px 0px 0px 3px #000;
&:hover {
opacity: 1;
}
.minus-btn {
display: none;
}
}
// Custom zoom
.mfp-full-size-scrollbars {
.mfp-img {
max-width: none !important;
max-height: none !important;
}
.mfp-figure {
overflow: auto;
figure {
overflow: auto;
}
}
button.mfp-arrow {
position: fixed;
}
.full-size-btn {
.minus-btn {
display: block;
}
.plus-btn {
display: none;
}
}
}
Demo
Gallery (more photos)
Single photo
