Formatting issue for mobile devices

Hi, FancyBox 1.3.4 has not really been developed with mobile devices in mind. It’s not a fix but you can disable FancyBox (using the latest release only) for smaller screens 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>

Put this code in a text widget or in your themes footer.php…

Hi Ravan,

Thanks for the reply. I think I am going to continue tinkering with things to see if I cannot make it work the way I want, but that snippet may end up being the way I need to go.

I’m not sure what actually causes this misplacement on these small devices. If it’s ‘just’ a CSS issue, I can recommend installing Jetpack and activating (allready active by default?) the Custom CSS module. Then targeting smaller screens with media query markup tests on the Appearance > Edit CSS page.

By the way, can you share a URL to a live example?

That code snippet didn’t seem to do anything. The paramaters for the if statement work fine, but the $(document).off bit doesn’t seem to be making any difference.

I ended up modifying the code slightly and adding it to the jquery.fancybox-1.3.4.pack.js file. Here is what I did:

Add this after ;(function(b){

var pixelRatio = window.devicePixelRatio || 1;
if(window.innerWidth < 500 || window.innerHeight < 500 || window.outerWidth < 500 || window.outerHeight < 500 ) {

}else{

Then add }; just before the })(jQuery); at the end of the document.

Not a super clean fix, but it works.

Live example at https://www.mshslc.org/gallery/debris-avalanche/

Just to clarify the above, this basically just disabled the .js file for small screens by effectively having a blank if statement, then the actual content within the else.

Hi wattyrev, you are right. The code does not do anything because, when used in a text widget, it is loaded before the fancybox call instead of after it. I should have thought of that…

This code should work (I tested it this time) :

<script type="text/javascript">
if(window.innerWidth < 500 || window.innerHeight < 500 || window.outerWidth < 500 || window.outerHeight < 500 ) {
  easy_fancybox_handler = null;
};
</script>