How to run jQuery only on non-mobile browser?

Question

I'm using this jQuery for an (excellent) lightbox-like plugin called zoombox:

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

It takes a links in the form http://vimeo.com/15171582, parses the vimeo id (15171582) and pops up a lightbox which loads an iframe with this URL:

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

How can I modify the jQuery so that, when viewed on a mobile browser,

the lightbox doesn't launch, and
the simple link gets converted to the iframe link?

Have jQuery get the height / width of the browser and launch prevent the launch of the screen size it too small. Same thing to manipulate the link. — Jay Blanchard, May 20 '13 at 18:40
[Check this question](http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-handheld-device-in-jquery). — The Alpha, May 20 '13 at 19:18

score 5 · Accepted Answer · answered May 20 '13 at 19:02

You can use this: http://detectmobilebrowsers.com/ to detect mobile devices.

Or detect window width like:

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

And make it responsive like:

// 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;
  }
}

NOT TESTED

edit: add doMagic call on load..

Just a simplification of the isMobile() is: `return window.innerWidth <= 600;` — Or Duan, Jan 06 '15 at 09:59

How to run jQuery only on non-mobile browser?

1 Answers1