Fancybox problem on iPhone

Question

Fancy box seems to have problems working on iPhone and iPad.

Go here http://fancybox.net/blog and click \"5. Display login form Try now\" on the page in an iPhone or

Answer 1

Fancybox attempts to auto resize and center itself everytime that the browser window is resized, and this event gets triggered a lot on iPads and iPhones. For fancy box 1.3.4, the code which controls this is line 608:

$(window).bind("resize.fb", $fancybox.resize);

To fix the issue, I modified this part of the fancybox JS, and added another option called "resizeOnWindowResize", which you can set to false for iPad and iPhone users, or just disable all together.

if(currentOpts.resizeOnWindowResize) {
   $(window).bind("resize.fb", $fancybox.resize);    
}

You must also add a default value for this option in $.fn.fancybox.defaults hash map.

Then, when calling fancybox you can utilize this new option:

$('#fancybox_link').fancybox(${'scrolling': 'no',
                              width: 'auto',
                              height: 'auto',
                              centerOnScroll: false,
                              resizeOnWindowResize : false});