Magnific-popup: Uncaught TypeError: Cannot read property 'top' of undefined

[joelleoj]

Hi,

I use magnific pop up to display a gallery of pictures, using angularjs.

when I use the zoom I have this error message in the console ("Uncaught TypeError: Cannot read property 'top' of undefined"). Without the zoom it's ok all works.

I have this in my service.js

initMagnificPopup: function() {
$(function() { //(I have to put it in a function else it doesn't work)
$('.with-caption').magnificPopup({
type: 'image',
gallery: {
enabled: true
},
zoom: {
enabled: true
}
});
});
}

and in my html:

{{ moment[0].time }}

I try to call my function initMagnificPopup with differents ways:
angular.element(document).ready(function () {
myService.initMagnificPopup();
});
or simply: myService.initMagnificPopup();

Thank you for responding!

[afider]

Maybe it's because the option zoom is activated and your thumbs on the aspect ratio does not match with a detailed image. I had a similar problem which was solved by disabling this option.

[LasseKofoed]

Maybe it's because the option zoom is activated and your thumbs on the aspect ratio does not match with a detailed image.

This worked for me. Thank you

[Neetesh1]

This solution worked for me. Thanks afider

[amindiary]

@afider This worked for me. Thank you

[ahmedbeheiry]

@afider I'm sorry but I didn't understand what do you mean?
What should I do?
I have the same problem and I don't know how to solve it

[DigitalEnki]

@ahmedbeheiry setting

zoom: {
enabled: false
}

or removing the whole zoom object should have the same result

[costidima]

You can keep the zoom option enabled but you have to make sure the opener element exists. Probably if you have copied the code from the Magnific Popup site then you have something like this:

opener: function(element) {
  return element.find('img');
}

and the <img> tag does not exists inside the opener so you have to change it to:

opener: function(element) {
  return element;
}