在较小的分辨率上禁用fancybox

时间:2013-02-15 23:18:09

标签: javascript fancybox

我正在使用此插件,并取得了成功:

http://www.fancyapps.com/fancybox/

我只是想知道是否有任何方法我可以禁用JS,如果用户在小于767px的屏幕上 - 也就是说,只是链接到图像本身而不是提升灯箱?我已经浏览了所有类似的问题,但他们的解决方案都没有真正起作用,我也不知道如何实现它们。

我可以下载并使用Modernizr,如果有帮助......?

2 个答案:

答案 0 :(得分:1)

我不确定您必须支持哪些浏览器,但您可以使用'window.matchMedia'。您可以在此处找到支持的浏览器:http://caniuse.com/matchmedia

关于你如何在你的情况下使用它:

if (window.matchMedia( "(min-width: 767px)" ).matches) {
    // Initialize fancyBox.
}

我没有看到你必须处理屏幕尺寸变化的任何地方,但如果你这样做,你可以像这样添加一个监听器:

var mediaQuery = window.matchMedia( "(min-width: 767px)" );
mediaQuery.addListener(handleWidthChanges);
handleWidthChanges(mediaQuery);

function handleWidthChanges(mediaQuery) {
    if (mediaQuery.match) {
        // Do nothing if fancyBox already initialized otherwise disable.
    } else {
        // Disable fancyBox if it's initialized otherwise do nothing.
    }
}

如果你必须支持那些目前支持'window.matchMedia'的浏览器,那么Modernizr就会这样:http://modernizr.com/docs/#mq,你可以依赖它。

祝你好运!

答案 1 :(得分:0)

刚刚找到了一个 css-only 解决方案:

@media handheld, only screen and (max-width: 540px){
    .fancybox {
        pointer-events: none;
    }
}