Question

我正在使用这个jQuery作为一个名为zoombox的（优秀的）类似灯箱的插件：

        $('a.zoombox').zoombox({...});

a形式的http://vimeo.com/15171582个链接，解析vimeo ID（15171582）并弹出一个灯箱，用此网址加载iframe：

http://player.vimeo.com/video/15171582?autoplay=1&title=0&byline=0&portrait=0&wmode=transparent

如何修改jQuery，以便在移动浏览器上查看时

灯箱无法启动，
简单链接会转换为iframe链接吗？

Answer 1

您可以使用此http://detectmobilebrowsers.com/来检测移动设备。

或检测窗口宽度，如：

function isMobile() {
   if(window.innerWidth <= 600) {
     return true;
   } else {
     return false;
   }
}

并使其响应如下：

// keep original url
$('a.zoombox').each(function() {
  var url = $(this).attr('href');
  $(this).data('url',url);
});

// on load
doMagic();

// resizing
$(window).resize(function() {
  doMagic();
});

// lightbox?
function doMagic() {
  $('a.zoombox').each(function() {
    var url = $(this).data('url');
    $(this).attr('href',url);
  });
  if (!isMobile) {
    $('a.zoombox').zoombox({...}); // lightbox here
  }
}

// detect mobile
function isMobile() {
  if(window.innerWidth <= 600) {
    return true;
  } else {
    return false;
  }
}

未经过测试

编辑：在加载时添加doMagic调用..

如何只在非移动浏览器上运行jQuery？

1 个答案: