Doing some work for a friend of mine and he's bought a template that he wants to customize a bit. It's using the Magnific Popup for the gallery and he wants to have the option to do a portrait pop up versus a square. It's using the minified Magnific Popup JS but here is their code namespaced.
Larix.prototype.initMagnificPopup = function() {
// Magnific Popup
$('.mfp-image').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-fade',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0, 1]
}
});
$('.mfp-video').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
},
HTML
<div class="container-fluid">
<div class="row container-grid mt-5 projects-wrapper">
<div class="img-max-width marketing">
<div class="item-box">
<a class="cbox-gallary1 mfp-image" href="images/portfolio/work-8.jpg" title="Project Name">
<img class="item-container mfp-fade" src="images/portfolio/work-8.jpg" alt="2" />
<div class="item-mask">
<div class="item-caption">
<h5 class="text-dark">Sidebar Stack</h5>
<p class="text-muted">client: Kay Garland</p>
</div>
</div>
</a>
</div>
</div>
CSS for the holder classes
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
color: white;
right: -6px;
text-align: right;
padding-right: 6px;
width: 100%; }