magnific-popup - 在打开的图像上切换verticalFit？

Question

我需要 Magnific 来打开带有 verticalFit = true 的图像才能开始。图像是纵向的，需要适合视口(viewport)。但是如果用户点击图像，Magnific 应该将verticalFit = false 以使图像扩展为全尺寸，以便用户可以平移并查看细节。

完成此操作的最简单方法似乎是每次用户单击图像时打开/关闭verticalFit。

HTML:

<link rel="stylesheet" href="magnific-popup.css">
<a class="image-popup-vertical-fit" href="path-to-some-full-sized-image"><img src="path-to-thumbnail-image"></a>
<script type="text/javascript" src="jquery.magnific-popup.min.js"></script>

通过“image-popup-vertical-fit”类将 HTML anchor 标记与 Magnific 链接的 Javascript:

<script type="text/javascript">
$(document).ready(function() {

    $('.image-popup-vertical-fit').magnificPopup({
        type: 'image',
        closeBtnInside: false,
        closeOnContentClick: false,
        image: {
            verticalFit: true
        }

    });
});
</script>

有一个 partial thread over on GitHub来自一年前的另一位用户，但它并没有真正解释它是如何完成的。

Answer 1

解决方案

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
});

解释

根据您提供的链接(谢谢，您为我提供了解决此问题的正确方向)，我编译并测试了上面的代码。我基本上是在设置 live点击 mfp-img 上的监听器包含弹出窗口内的图像的类。单击后，代码会在整个弹出窗口的 true 和 false 之间切换 verticalFit 选项。请注意， on 应该有 jQuery 1.7 或更高版本。处理程序工作，否则，转换 on处理程序到 live如果您使用低于 1.7 的 jQuery，则处理程序。

请注意，您需要在初始化弹出窗口时设置以下选项，否则上面编码的自定义点击处理程序将不起作用:

navigateByImgClick: false