Disable fancybox for smalll screens

  • Resolved kallym

    (@kallym)


    11 years, 3 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: https://bit.ly/11Vi6VU

    https://www.ads-software.com/plugins/easy-fancybox/

Viewing 13 replies - 1 through 13 (of 13 total)

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

    Thread Starter kallym

    (@kallym)

    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.

    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.

    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>

    Thread Starter kallym

    (@kallym)

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

    Is possible add this option into settings? Thanks

    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)?

    ??

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

    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

    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 https://tinypic.com/r/14p6vd/8

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

    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.

    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?

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Disable fancybox for smalll screens’ is closed to new replies.