Magnific Popup - WordPress Divi Theme - Uncaught TypeError: Cannot read property 'top' of undefined

Question

I'm trying to get the lightbox/modal windows working on this page: WordPress (4.7.2; no-plugins enabled) site with Divi theme which uses Magnific Popup (v1.1.0)

http://www.mucha-art.com/portfolio/

When I click on one of the images instead of the lightbox/pop-up working, I get a js error:

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)

...seems to be pointing to line 722 in the console:

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

Meral Harbes Meral Harbes · Accepted Answer · 2017-05-06T15:54:31

I just encountered this myself. It's looking for .top of the image it's supposed to zoom. Without seeing your code I assume you did not preload the image.

My Client has an image assortment where the images are put in via css as background-image. If you use Magnific Popup with hierarchies it will work out of the box. If not you will need to load the images too.

My hacky solution was to add an image tag that loads the same, full image and give it an invisible class with no height and no width so that it would be at the correct position for the zoom animation to start:

$(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 Theme - Uncaught TypeError: Cannot read property 'top' of undefined

1 Answers