At last, I gave up the Magnifier Popup - zoom function, and replace it with css - zoom function.

The solution:

`var zoom_percent = "100";
        function zoom(zoom_percent){
            $(".mfp-figure figure").click(function(){
                switch(zoom_percent){
                    case "100":
                        zoom_percent = "120";
                        break;
                    case "120":
                        zoom_percent = "150";
                        break;
                    case "150":
                        zoom_percent = "200";
                        $(".mfp-figure figure").css("cursor", "zoom-out");
                        break;
                    case "200":
                        zoom_percent = "100";
                        $(".mfp-figure figure").css("cursor", "zoom-in");
                        break;
                }
                $(this).css("zoom", zoom_percent+"%");
            });
        }

        $('#img').magnificPopup({ 
          delegate: 'a',
          type: 'image',
          callbacks: {
              open: function() {
                  $(".mfp-figure figure").css("cursor", "zoom-in");
                  zoom(zoom_percent);
              },
              close: function() {
                // Will fire when popup is closed
              }
              // e.t.c.
            }

        });`

Hope this helps someone who is also looking for it.

Solution

jQuery(document).on('click', '.mfp-img', function(){        
    var mfp = jQuery.magnificPopup.instance; // get instance
    mfp.st.image.verticalFit = !mfp.st.image.verticalFit; // toggle verticalFit on and off
    mfp.currItem.img.removeAttr('style'); // remove style attribute, to remove max-width if it was applied
    mfp.updateSize(); // force update of size
});

Explanation

Based on the links you provided (thank you, you set me in the right direction to solve this), I compiled and tested the above code. I'm basically setting a live click listener on the mfp-img class which contains the images inside the popup. Once clicked, the code toggles the verticalFit option between true and false for the whole popup. Note that you should have jQuery 1.7 or above for the on handler to work, otherwise, convert the on handler to a live handler if you're using jQuery lower than 1.7.

Note that you need to set the option below while initializing the popup otherwise the custom click handler coded above will not work:

navigateByImgClick: false