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,
iframe
link? 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..
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.