Fancybox 3 ne redimensionne pas Facebook plugin sur les appareils mobiles

Question

J'ai Fancybox ensemble de sorte que chaque image s'ouvre dans une visionneuse avec des boutons Facebook like/share uniques. Dans Fancybox 2, la fenêtre se redimensionne parfaitement pour s'adapter au titre et aux boutons, aussi bien sur les ordinateurs que sur les appareils mobiles. Mais dans le nouveau Fancybox 3 (que j'ai ajouté pour permettre le balayage), Fancybox ajoute une énorme zone d'espace sous les boutons du plugin - mais seulement sur les appareils mobiles. Je n'arrive pas à comprendre comment supprimer cet espace - et il est assez grand pour avoir l'air vraiment bizarre. Depuis les boutons Facebook sont très bien vus par Fancybox 2 sur les appareils mobiles, je devine que c'est un problème avec Fancybox 3.

Voici mon script pour Fancybox 2. Les deux ordinateurs et l'affichage mobile sont bien:

$("#gallery-events a").fancybox({ 

beforeShow: function() { 
if (this.title) { 
    this.title += '<br />'; // Line break after title 
    this.title += '<div class="fb-like-container"><div class="fb-like" data-href="' + this.href + '" data-layout="button_count" data-share="true"></div></div>'; 
    } 
}, 
afterShow: function() { 
    FB.XFBML.parse(); 
    $.fancybox.update(); // resize after show 
}, 
helpers: { 
    title: { 
     type: 'inside' 
    } 
}, 
    loop: true 
}); 

Fancybox 2 démonstration: http://www.lycochoir.com/swipe-3/photos.html

Pour Fancybox 3, le script est très similaire. En suivant les conseils sur ce site, j'ai seulement changé "beforeShow" en "afterLoad" et changé l'assistant de titre en "légende".

$("#gallery-events a").fancybox({ 

afterLoad: function() { 
if (this.title) { 
    this.title += '<br />'; // Line break after title 
    this.title += '<div class="fb-like-container"><div class="fb-like" data-href="' + this.href + '" data-layout="button_count" data-share="true" mobile="false"></div></div>'; 
    } 
}, 
afterShow: function() { 
    FB.XFBML.parse(); 
    $.fancybox.update(); // resize after show 
}, 
    caption: { 
     type : 'inside' 
    }, 
    loop: true 
}); 

Fancybox 3 démonstration: http://www.lycochoir.com/photos/annual-events.html

Sur un navigateur traditionnel, les deux visionneuses doivent paraître identiques. L'espace blanc massif sous les boutons apparaît uniquement lorsque la visionneuse Fancybox 3 est visualisée sur un appareil mobile, tel qu'un téléphone ou un iPad. Et l'espace blanc disparaît lorsque le plugin DIV est supprimé. Puisque le script # .fancybox.update() fonctionne bien sur un navigateur traditionnel (même dans Fancybox 3), je suppose que le problème réside dans la partie du script Fancybox 3 qui cible les navigateurs mobiles. Ou peut-être que le code de mise à jour ne fonctionne plus pour les appareils mobiles?

Je suis à perte. Je ne vois pas pourquoi Fancybox ajouterait 100px ou plus d'espace vertical juste à cause du plugin. J'ai même supprimé le style "fb-like-container" (qui ajoute 10px haut et bas les marges pour éloigner les boutons du titre et du bord) mais ce n'est pas le coupable. Quelqu'un a d'autres idées? ETA: Après des heures passées à regarder en aveugle le script Fancybox, j'ai finalement trouvé une réponse. J'ai déplacé le # .fancybox.update(); dans la fonction afterLoad: La boîte semble maintenant redimensionner correctement sur mobile, même si mes tests sont encore tôt.

Maintenant je me demande si le FB.XFBML.parse() doit aussi être dans le afterLoad. Les codes "beforeShow" et "afterShow" sont-ils dans Fancybox 3? La version bêta est sortie depuis bientôt deux ans - j'aurais aimé qu'il y ait plus de documentation sur cette version. J'ai eu quelques trébuchements avec lui, mais l'effet de balayage est plutôt génial. Beaucoup plus lisse que les plugins j'ai essayé avec Fancybox 2.

DEUXIÈME ÉDITION: Voici où je suis: si j'ajoute un style en spécifiant la hauteur exacte du bouton plugin (20px) ET placez le $ .fancybox.update() ; dans la fonction afterLoad, cela fonctionne. Donc, n'importe qui ... si c'est tout ce dont vous avez besoin, ça fonctionne. Cependant, mon objectif a toujours été d'avoir un bouton similaire ET une boîte de commentaire. Mais bien sûr, vous ne pouvez pas spécifier une hauteur pour une boîte de commentaires. Et si vous déplacez le $ .fancybox.update(); Dans afterLoad, Fancybox ne redimensionne pas la zone de la visionneuse pour qu'elle corresponde à la zone de commentaire. Si vous voulez que la zone de commentaire corresponde à la zone, vous devez replacer le script de mise à jour dans afterShow - mais vous obtenez alors l'espace blanc massif provoqué par le bouton Like, qui était le problème original!

Je continue à travailler sur ceci - juste pensé que je mettrais à jour n'importe qui intéressé par mes progrès. Le problème principal est que le script $ .fancybox.update() ne peut pas être dans afterLoad à moins que le contenu dynamique (plugins de Facebook) n'ait des hauteurs spécifiques - sinon il n'élargira pas la lightbox au besoin. Les idées de tout le monde sont toujours les bienvenues! TROISIÈME ÉDITION - L'espace blanc supplémentaire apparaît uniquement lorsque la visionneuse pour une image particulière est chargée sur un périphérique mobile. Si vous tournez votre appareil sur le côté (horizontalement ou verticalement), la lightbox se redimensionne et l'espace blanc disparaît! Retournez à l'orientation d'origine, et l'espace blanc est toujours parti. Mais alors allez à l'image NEXT, et l'espace blanc est de retour. En d'autres termes, l'énorme espace blanc n'apparaît que lorsque l'image de la visionneuse commence à se charger (sur le mobile). Je suppose que Fancybox exécute un script lorsque l'orientation d'un périphérique mobile est activée, et que ce script semble résoudre le problème. Est-ce le script "onUpdate"? Est-il possible d'avoir la même chose lorsque l'image se charge d'abord? Cela réglerait le problème, mais je ne sais pas comment le faire. J'ai joué avec l'ajout de "onUpdate" en tant que fonction (après afterShow), mais soit il n'a rien fait, soit il a tout foutu en l'air.

Answer 1

Comme d'habitude, le correctif était trompeusement simple et n'impliquait aucun changement de script Fancybox.

Mon script Fancybox 3 est resté le même que ce qui apparaît ci-dessus. L'analyse et la mise à jour sont toujours dans afterShow.

Tout ce que je devais faire était d'ajouter une hauteur au conteneur qui contient le bouton Facebook Like. Le bouton Like était déjà dans un conteneur DIV qui activait les marges supérieure et inférieure (pour espacer le bouton de la légende et de la boîte de commentaires). J'ai simplement ajouté une hauteur à ce conteneur DIV, et tout d'un coup, tout l'espace blanc que Fancybox voulait ajouter quand il a chargé le bouton Like sur les appareils mobiles était parti. Voila!

Voici le style (je n'ai posté aucun CSS ci-dessus). J'ai ajouté ce style au script CSS de Fancybox.

.fb-like-container { 
margin-top: 10px; 
margin-bottom: 10px; 
height: 20px; 
} 

Si vous regardez mon lien Fancybox 3 sur mobile et voir encore l'espace extra blanc au bas de la visionneuse: cet espace est causé par la boîte de commentaires, et est un problème connu. L'espace blanc dont j'avais besoin pour éradiquer dans ce poste était une situation distincte, et était beaucoup plus grand et ennuyeux.

Espérons que cela peut aider quelqu'un d'autre avec Fancybox un jour!