Question

我试图让这个页面上的灯箱/模态窗口工作：使用Magnific Popup（v1.1.0）的Divi主题的WordPress（4.7.2;无插件启用）网站

当我点击其中一个图片而不是灯箱/弹出窗口工作时，我收到一个js错误：

Uncaught TypeError: Cannot read property 'top' of undefined
    at t._getOffset (jquery.magnific-popup.js:4)
    at HTMLAnchorElement.<anonymous> (jquery.magnific-popup.js:4)
    at HTMLAnchorElement.dispatch (jquery.js:3)
    at HTMLAnchorElement.r.handle (jquery.js:3)
    at Object.trigger (jquery.js:3)
    at n.fn.init.triggerHandler (jquery.js:3)
    at y (jquery.magnific-popup.js:4)
    at t.open (jquery.magnific-popup.js:4)
    at t._openClick (jquery.magnific-popup.js:4)
    at HTMLAnchorElement.d (jquery.magnific-popup.js:4)

...似乎指向控制台中的第722行：

e.top -= a(window).scrollTop() - f;

Answer 1

我自己就是遇到过这个。它正在寻找它应该放大的图像的.top。在没有看到你的代码的情况下，我假设你没有预加载图像。

我的客户端有一个图像分类，其中图像通过css作为背景图像放入。如果您使用Magnific Popup与层次结构，它将开箱即用。如果不是，您也需要加载图像。

我的hacky解决方案是添加一个图像标记，加载相同的完整图像并给它一个没有高度和没有宽度的不可见类，以便它可以在缩放动画开始的正确位置：

$(document).ready(function() {

    $(".galerie-content").magnificPopup({
        delegate: 'a',
        type: 'image',        
        closeOnContentClick: true,
        closeBtnInside: false,
        mainClass: 'mfp-no-margins mfp-with-zoom',
        zoom: {
            enabled: true,
            duration: 200
        }
    });

});

.galerie-img-1 {
    background-image: url("../img/galery/galery_01.jpg");
    background-repeat: none;
    background-position: center;
    background-size: cover;
    opacity: 1;
    height: 300px;
}

.invisible{
    height: 0px;
    width: 0px;
}

<a href="./img/galery/galery_01.jpg">
    <div class="galerie-img-1">
      <div class="galerie-one-one col-12 col-6-m">
        <img src="./img/galery/galery_01.jpg" class="invisible">
      </div>
    </div>
</a>

Magnific Popup - WordPress Divi主题 - Uncaught TypeError：无法读取属性＆＃39; top＆＃39;未定义的

1 个答案: