仅在特定屏幕宽度以上触发 Magnific Popup

Question

此刻脑子一片空白。我希望仅在特定屏幕宽度以上触发 Magnific。我的密码是

        $(function() {
            $('.photos a').magnificPopup({
                gallery: {
                    enabled: true
                },
                type: 'image',
                zoom: {
                    duration: 250,
                    enabled: true
                }
            });
        });

我是否需要将它包装在一个函数中，然后使用 $('.photos a').click();

Answer 1

是的。 $('.photos a').magnificPopup(... 之类的代码会创建一个侦听器；它在页面上采取行动。所以如果你想要一个有条件的监听器，你应该只在满足条件的情况下定义/创建监听器。

有关如何最好地检测视口宽度的各种想法，请参阅 jQuery: How to detect window width on the fly? and http://www.fourfront.us/blog/jquery-window-width-and-media-queries。

但最终结果可能是这样的：

var windowsize = $window.width();
if (windowsize > 440) {
  // Any code inside here will only execute on larger window sizes.
  // So define your listener here.
  $('.photos a').magnificPopup({...
}

编辑：听起来这里的部分问题是如何在用户调整屏幕大小时动态启用或禁用小部件。您可以将 window 宽度检查包装在 .click(function(){... 侦听器中，但这可能会变得复杂，所以我查看了 Magnific 的 API 文档，发现有一个选项可以解决这种情况。

参见 http://dimsemenov.com/plugins/magnific-popup/documentation.html#options：声明 Magnific 小部件时（就像在上面的代码中一样，添加一个 disableOn 选项如下。如果满足以下条件，这将完全禁用小部件。

disableOn: function() {
  if( $(window).width() < 600 ) {
    return false;
  } else {
    return true;
  }
}

仅在特定屏幕宽度以上触发 Magnific Popup

Fire Magnific Popup only above certain screen width

jquery

magnific-popup