為我的一個朋友做一些工作，他買了一個模板，他想定制一點(diǎn)。它為畫廊使用了放大的彈出窗口，他想選擇彈出一個肖像而不是一個正方形。它使用了縮小的Magnific Popup JS，但這是它們的代碼命名空間。

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
    });
},

超文本標(biāo)記語言

<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>

holder類的CSS

.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
 color: white;
 right: -6px;
 text-align: right;
 padding-right: 6px;
 width: 100%; }