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 http://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>
