Magnific Popup - Enable zoom animation when using $.magnificPopup.open

Question

I am able to enable the zoom animation when I pre-initialize the Magnific Popup using the syntax below.

element.find('.productImage').magnificPopup({
                type: 'image',
                mainClass: 'mfp-with-zoom',
                zoom: {
                    enabled: true,
                    duration: 300, // duration of the effect, in milliseconds
                    easing: 'ease-in-out' // CSS transition
                    }
            });

However, there are certain places where I need to use the $.magnificPopup.open function to display an image. However the syntax below is giving me a "JavaScript runtime error: Object doesn't support property or method 'is'" error.

element.on('click', function() {
                $.magnificPopup.open({
                    items: {
                        src: $(this).attr('data-mfp-src')
                    },
                    type: 'image',
                    zoom: {
                        enabled: true,
                        duration: 300, // duration of the effect, in milliseconds
                        easing: 'ease-in-out' // CSS transition
                    }
                });
            });

If I remove the "zoom {...}" part from the call, it works fine though but it'd be nice to have the zoom animation when the popup is opened this way. Is it possible at all? Please advise. Thanks!