Fancybox problem on iPhone

问题

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 ipad. The form is not center and when you try to enter your details the box moves about the page and makes it unusable.

Any fixes?

Thanks, C

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

回答2:

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

fixed: false,

回答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.

回答4:

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

来源：https://stackoverflow.com/questions/3889273/fancybox-problem-on-iphone

标签

jquery

iphone

fancybox