WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
[resolved] Disable Easy FancyBox for mobiles? (8 posts)

  1. Alex
    Member
    Posted 10 months ago #

    What is the easyest way to disable Easy FancyBox when wp_is_mobile() is true?

    Regards,
    Alex.

    http://wordpress.org/extend/plugins/easy-fancybox/

  2. RavanH
    Member
    Plugin Author

    Posted 10 months ago #

    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...

  3. Alex
    Member
    Posted 10 months ago #

    Thank you, it seems to work for smaller phones but there are a lot of smartphones with resolutions equivament with laptops nowadays (like 1280x800).
    I'll think about it...

  4. RavanH
    Member
    Plugin Author

    Posted 10 months ago #

    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...

  5. achensee
    Member
    Posted 10 months ago #

    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');
        }
    }
  6. RavanH
    Member
    Plugin Author

    Posted 10 months ago #

    Hi achensee, that's a pretty cool solution. Thanks for sharing :)

  7. Alex
    Member
    Posted 10 months ago #

    Very cool indeed!
    Thank you for all the help guys!!

  8. andrescifuentesr
    Member
    Posted 9 months ago #

    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

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.