Make the iframe-popups open a new page at small screens

Yes you can make that happen.

First, insert that original code snippet you find to disable FancyBox for small screens on your site.

Then, the easiest is to simply give each link that you want to have opened in a new browser window the attribute target="_blank" (in the WYSIWYG post editor, edit the link and find the check box “open in a new tab”) … this will not hinder FancyBox in any way while on smaller screens, where FancyBox is disabled with that original code you found, it will cause the link to open a new tab or window.

If you have too many of those links to edit them manually, try something like this:

<script type="text/javascript">
jQuery("a.fancybox-iframe").attr("target","_blank");
</script>

Many thanks for your help!

However, the page has 3 sorts of Easy-Fancybox links respectively as images, “fancybox-inline” and “fancybox-iframe”. Disabling the plugin at small screens affects the image gallery and inline-links as well.

So I come up with a thought that using script in the article and here is the code I use:

<script type="text/javascript">
           var pixelRatio = window.devicePixelRatio || 1;
           if(window.innerWidth/pixelRatio < 641 ) {
              easy_fancybox_handler = function(){
                   jQuery("a.fancybox-iframe").attr("target","_blank");
              };
           };
 </script>

But it still worked as disabling the plugin. Is is possible to detect link-type(fancybox-iframe) and override it like “easy_fancybox_handler = Null;”?

After several experiments ..I finally got it!

1. Append target=”_blank” to all iframe-links.
2. Remove “fancybox-iframe” class at small screen devices.

<script type="text/javascript">
     var pixelRatio = window.devicePixelRatio || 1;
     if(window.innerWidth/pixelRatio < 641 ) {
          jQuery(document).ready(function(){
                jQuery(".fancybox-iframe").removeAttr("class");
          });
     };
</script>

Tested successfully!