Add a text widget to your sidebar (or better if you have one: footerbar) with this code:
<script type="text/javascript">
var pixelRatio = window.devicePixelRatio || 1;
if(window.innerWidth < 500 || window.innerHeight < 500 || window.outerWidth < 500 || window.outerHeight < 500 ) {
jQuery(document).off('ready gform_post_render', easy_fancybox_handler);
};
</script>
It is not an actual ‘is_mobile’ but it does allow you to switch off fancybox for smaller screen sizes. Tweak the value 500 to your liking…
Thread Starter
Alex
(@alexiarna)
Thank you, it seems to work for smaller phones but there are a lot of smartphones with resolutions equivament with laptops nowadays (like 1280×800).
I’ll think about it…
Hmmm… I agree it’s a bit tricky. It all depends on the device and what it returns as window.innerWidth: either the ‘true’ pixels or the number of pixels taking the devices pixel ratio into account.
Smaller devices with a remarkably high screen pixel count usually have a devicePixelRatio larger than 1. On ‘Retina devices’ it is even 2. We could use this value by either substracting or multiplying the inner sizes with it but we do not know for each device if the returned innerWidth has already taken the devicePixelRatio into account or not. So it might still be a bit unpredictable…
By the way, if you are using Easy FancyBox 1.5.0 then the code will have to change a bit to make it work from a text widget at all.
Something like this will disable FancyBox on an Asus Nexus 7 (tested) in portrait mode but leaves it active in landscape:
<script type="text/javascript">
var pixelRatio = window.devicePixelRatio || 1;
/* alert(window.innerWidth + ' / ' + pixelRatio + ' = ' + window.innerWidth/pixelRatio); */
if(window.innerWidth/pixelRatio < 640 ) {
easy_fancybox_handler = null;
};
</script>
You can test http://demo.status301.net/easy-fancybox-sandbox/ (the popup is that commented alert line) and see how that works in a different device if you like…
you can also add this to your functions.php
add_action('wp_head','my_remove_fancybox_head',999);
add_action('wp_footer','my_remove_fancybox_footer',999);
function my_remove_fancybox_head() {
if (wp_is_mobile()) {
wp_deregister_script('jquery-fancybox');
wp_deregister_script('jquery-easing');
wp_deregister_script('jquery-mousewheel');
wp_deregister_script('jquery-metadata');
wp_dequeue_script('jquery-fancybox');
wp_dequeue_style('easy-fancybox-css');
wp_dequeue_script('jquery-fancybox');
}
}
function my_remove_fancybox_footer() {
if (wp_is_mobile()) {
wp_dequeue_script('jquery-fancybox');
wp_dequeue_script('jquery-easing');
wp_dequeue_script('jquery-mousewheel');
wp_dequeue_script('jquery-metadata');
}
}
Hi achensee, that’s a pretty cool solution. Thanks for sharing 🙂
Thread Starter
Alex
(@alexiarna)
Very cool indeed!
Thank you for all the help guys!!
Hi guys
Thanks achensee for your solution, it works pretty neat. I would like just to know why you have remove fancybox, both, header and footer.
thaks again
