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});

Answer 2

Quite an old problem, but had this plugin running on an old site. I noticed that Fancybox adds the class "fancybox-lock" to the HTML tag, using some simple JS i've added this to the BODY and it appears to be working okay now.

Hope this helps someone!

JQuery

$(function(){
     var fancyboxVisible = false;
        $(document).on('click', '.fancybox', function() {
           if(fancyboxVisible) {
               $('html, body').removeClass('fancybox-lock');
               fancyboxVisible = false;
           } else {
               $('html, body').addClass('fancybox-lock');
               fancyboxVisible = true;
           }
        });
});

Answer 3

Okay, so I'm new to this and not sure if this is going to work on all devices but I have it manageable on my iPhone. What I did was checking "Show title" in the media settings for the iframe and set the position to "inside"

When I create a link or an image I put this as the title:

<a href="http://www.fetalscreening.com/nuchal_screening.php" target="_blank">
  Click in having trouble with mobile device
</a>

I realize this may take away from my tags for SEO reasons but it offers people looking at your page with their mobile device a way to click and view the content you need in a new window.

Again I'm not sure if it's a sure fire way, but I've spent the last 5 hours reading posts and FAQs trying to come up with something.

It serves my purposes. If anyone has any other suggestions I'm all ears.

Answer 4

In Fancybox 2.0, there is a new option that helped me to solve these scrolling problems on the iPhone:

fixed: false,