Question

此刻心中一片空白。我希望只在某些屏幕宽度以上点亮Magnific。我的代码是

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

我是否需要将其包装在一个函数中然后使用$（＆＃39; .photos a＆＃39;）执行某些操作。单击（）;

Answer 1

是。像$('.photos a').magnificPopup(...这样的代码会创建一个监听器;它需要在页面上执行操作。因此，如果您需要条件侦听器，则只应在满足条件时定义/创建侦听器。

有关如何最佳地检测视口宽度的各种想法，请参阅jQuery: How to detect window width on the fly?和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({...
}

编辑：这听起来像是问题的一部分是如何在用户调整屏幕大小时动态启用或禁用小部件。您可以将窗口宽度检查包装在.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;
  }
}

Fire Magnific Popup仅在某个屏幕宽度之上

1 个答案: