WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
[resolved] [closed] Disable fancybox for smalll screens (14 posts)

  1. kallym
    Member
    Posted 11 months ago #

    I need to disable fancybox on small screens. I read your FAQ and see where you recommended using:

    <script type="text/javascript">
    if(window.innerWidth < 800 || window.innerHeight < 800 || window.outerWidth < 800 || window.outerHeight < 800 ) {
      jQuery(document).off('ready gform_post_render', easy_fancybox_handler);
    };
    </script>

    That did not work for me. I was confused by the gform_post_render as I don't use gravity forms, so I removed that and changed that line to:

    jQuery(document).off('ready', easy_fancybox_handler);

    That didn't work either. I also found a version that added

    var pixelRatio = window.devicePixelRatio || 1;

    But none of the combinations I tried will work.
    Do you have any advice?
    link: http://bit.ly/11Vi6VU

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

  2. Andrius
    Member
    Posted 10 months ago #

    I have a similar problem. I adjusted the pixel count to match the screen of iPhone 4 (which I am using for testing).

    The script seems to stop all other jQuery on the site, but fancybox still opens.

  3. kallym
    Member
    Posted 10 months ago #

    I solved my problem. Your problem got me curious, so I looked at the page source code to see all the instances of jquery and noticed that the script to load/turn on easy_fancybox_handler was at the bottom of the page, below the Widget area where I had added the script above. So I deleted the script from the widget area and added it at the bottom of my footer.php file before the ending body tag. Now it is working properly.

    I did not have the same problem as you. All of my other jquery scripts were working fine. For me it was just a matter of placement.

  4. Andrius
    Member
    Posted 10 months ago #

    thanks for the reply. I'll give it a try. I also suspect W3 Total Cache might be a problem as it has disabled my Google Fonts. I'll investigate and let you know.

  5. RavanH
    Member
    Plugin Author

    Posted 10 months ago #

    Hi, the code in the FAQ's was not yet adapted to the plugin version 1.5+

    Moving the snippet to after the wp_footer() call in footer.php will indeed work. Another method can be to use this code in a text widget:

    <script type="text/javascript">
    var pixelRatio = window.devicePixelRatio || 1;
    if(window.innerWidth/pixelRatio < 641 ) {
      easy_fancybox_handler = null;
    };
    </script>
  6. kallym
    Member
    Posted 10 months ago #

    Thank you! That is good to know if I need to use a widget.

  7. eldenroot
    Member
    Posted 9 months ago #

    Is possible add this option into settings? Thanks

  8. emj
    Member
    Posted 5 months ago #

    I am able to disable fancybox-iframe on mobile devices using the script provided, thank you!

    Wondering though, is there something I can add to that script so links on mobile open in a new window (_blank)?

    :)

  9. RavanH
    Member
    Plugin Author

    Posted 5 months ago #

    @emj
    Supposing you are talking about image links, not about other media, then try:

    <script type="text/javascript">
    var pixelRatio = window.devicePixelRatio || 1;
    if(window.innerWidth/pixelRatio < 641 ) {
        easy_fancybox_handler = function(){
            var fb_IMG_select = 'a[href*=".jpg"]:not(.nofancybox), area[href*=".jpg"]:not(.nofancybox), a[href*=".jpeg"]:not(.nofancybox), area[href*=".jpeg"]:not(.nofancybox), a[href*=".png"]:not(.nofancybox), area[href*=".png"]:not(.nofancybox);
            jQuery(fb_IMG_select).attr('target','_blank');
        };
    };
    </script>
  10. befree22
    Member
    Posted 2 months ago #

    1. Will you add the following code as an option in settings when you upgrade the plugin...?

    <script type="text/javascript">
    var pixelRatio = window.devicePixelRatio || 1;
    if(window.innerWidth/pixelRatio < 641 ) {
      easy_fancybox_handler = null;
    };
    </script>

    2. What code would I use to open images, video, pdf, audio, flash, powerpoint links in a new window?

    Awaiting a reply

  11. befree22
    Member
    Posted 2 months ago #

    3. How do I get the description to display under images when someone clicks an image? Where in Settings > Media > FancyBox do I select the option to show the description for each image in the fancybox?

    In Media > Library I added a description to an image but it's not displaying when I click the fancybox -- see http://tinypic.com/r/14p6vd/8

  12. RavanH
    Member
    Plugin Author

    Posted 2 months ago #

    @befree22 -

    1. Will you add the following code as an option in settings when you upgrade the plugin...?

    Probably the Advanced extension. But you can simply add the code to a text widget.

    2. What code would I use to open images, video, pdf, audio, flash, powerpoint links in a new window?

    Try

    <script type="text/javascript">
    var pixelRatio = window.devicePixelRatio || 1;
    if(window.innerWidth/pixelRatio < 641 ) {
      easy_fancybox_handler = function(){
    	var fb_IMG_select = 'a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"]';
    	jQuery(fb_IMG_select).attr("target","_blank");
      };
    };
    </script>

    3. How do I get the description to display under images when someone clicks an image?

    Only title is supported.

  13. befree22
    Member
    Posted 2 months ago #

    I added the code above and I think it's working on iphone -- all image, pdf links open in fancybox as you coded it and the .mp3 opens in an external link. Will test it on android.

    OK, only the title is supported but in a future update, can you include the option to pull description image from Media > Library ? This will complete your well-coded plugin beautifully.

  14. carolemagouirk
    Member
    Posted 2 months ago #

    I used this code in the footer:

    <script type="text/javascript">
    var pixelRatio = window.devicePixelRatio || 1;
    if(window.innerWidth/pixelRatio < 641 ) {
        easy_fancybox_handler = function(){
            var fb_IMG_select = 'a[href*=".jpg"]:not(.nofancybox), area[href*=".jpg"]:not(.nofancybox), a[href*=".jpeg"]:not(.nofancybox), area[href*=".jpeg"]:not(.nofancybox), a[href*=".png"]:not(.nofancybox), area[href*=".png"]:not(.nofancybox);
            jQuery(fb_IMG_select).attr('target','_blank');
        };
    };
    </script>

    Caused a fatal error with autoptimize.

    My site doesn't use widgets but I assume it would do the same thing.
    Is there another way to disable fancybox on small screens?

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic