Question

我需要Magnific来打开图像，使用verticalFit = true来启动。图像是纵向，需要适合视口。但是，如果用户点击图像，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>

Javascript通过类＆＃34;图像-popup-vertical-fit＆＃34;

将HTML锚标记与Magnific链接

<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或更高版本，否则，如果使用的jQuery低于1.7，则将on处理程序转换为live处理程序。

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

navigateByImgClick: false

在打开的图像上切换verticalFit？

1 个答案: