Vraag Fancybox-probleem op de iPhone


Fancy box lijkt problemen te hebben met werken op iPhone en iPad.

Ga hier http://fancybox.net/blog en klik op "5. Login-formulier weergeven Probeer nu" op de pagina op een iPhone of iPad. Het formulier is niet centraal en wanneer u probeert uw gegevens in te voeren, wordt het vak verplaatst over de pagina en onbruikbaar gemaakt.

Eventuele oplossingen?

Bedankt, C


14
2017-10-08 09:25


oorsprong


antwoorden:


Fancybox probeert automatisch de grootte van het formaat aan te passen en zichzelf te centreren wanneer het browservenster wordt vergroot en deze gebeurtenis wordt veel geactiveerd op iPads en iPhones. Voor fancy box 1.3.4 is de code die dit bestuurt lijn 608:

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

Om het probleem op te lossen, heb ik dit deel van de fancybox JS aangepast en een andere optie toegevoegd met de naam "resizeOnWindowResize", die je kunt instellen op false voor iPad- en iPhone-gebruikers, of gewoon alles samen uitschakelen.

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

U moet ook een standaardwaarde voor deze optie toevoegen aan de hash-map $ .fn.fancybox.defaults.

Dan, wanneer u fancybox aanroept, kunt u deze nieuwe optie gebruiken:

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

5
2017-07-25 19:52



In Fancybox 2.0 is er een nieuwe optie die me heeft geholpen om deze scrolproblemen op de iPhone op te lossen:

fixed: false,

2
2018-01-15 17:35



Oké, dus ik ben hier nieuw voor en niet zeker of dit op alle apparaten werkt, maar ik kan het op mijn iPhone beheren. Wat ik deed was het aanvinken van "Titel tonen" in de media-instellingen voor het iframe en de positie instellen op "binnen"

Wanneer ik een link of een afbeelding maak, zet ik dit als de titel:

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

Ik realiseer me dat dit om SEO-redenen mogelijk van mijn tags afhaalt, maar het biedt mensen die naar uw pagina kijken met hun mobiele apparaat een manier om te klikken en de inhoud te bekijken die u nodig hebt in een nieuw venster.

Nogmaals, ik weet niet zeker of het een veilige manier is, maar ik heb de afgelopen 5 uur gelezen en veelgestelde vragen gelezen om iets te verzinnen.

Het dient mijn doelen. Als iemand andere suggesties heeft, ben ik een en al oor.


0
2018-06-22 04:45



Een behoorlijk oud probleem, maar deze plugin draaide op een oude site. Ik merkte dat Fancybox de klasse "fancybox-lock" aan de HTML-tag toevoegt, met behulp van enkele eenvoudige JS ik heb dit aan de BODY toegevoegd en het lijkt nu goed te werken.

Ik hoop dat dit iemand helpt!

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

0
2017-09-20 20:33