Can you change the Magnfic Popup modal Size depending on CSS class?

40 Views Asked by At

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%; }
0

There are 0 best solutions below