Lors du chargement de données telles que des images dans une fancybox, il est courant que ces dernières ne soient pas affichées directement et dans certains cas ça peut donner des résultats étranges sur le placement de la fancybox et rendre son contenu difficilement utilisable pour les visiteurs.

Pour pallier à ce problème dans le cas où on souhaite laisser les dimensions se définir automatiquement en fonction du contenu, il va falloir ruser, en effet il n’existe pas, pour le moment en tout cas, dans la librairie, de moyen de recentrer la fancybox lors d’un redimensionnement sans intervention extérieure, il va donc falloir utiliser un petit script qui va vérifier la taille de la fancybox et lancer le centrage de cette dernière uniquement après s’être assuré que la largeur n’est plus modifiée, pour cela, il va falloir faire 3 choses :

• Créer une variable globale afin de recevoir la largeur de la fancybox
• Créer une fonction de vérification du changement de la largeur de cette dernière
• Créer un appel à cette fonction à partir du chargement de la fancybox

Voici donc le code résultant de ces 3 points :

// Création de la variable
var fancy_width = 0;

// Création de la fonction de centrage
function centerFancy(new_width) {
    if (new_width != fancy_width) {
        fancy_width = new_width;
        setTimeout(function() {centerFancy($('#fancybox-wrap').width());}, 500);
        return false;
    }
    $.aifancybox.center();
}

// Appel de la fonction au chargement de la fancybox
$('.fancybox').fancybox({
    onComplete : function() {            
        setTimeout(function() {centerFancy($('#fancybox-wrap').width());}, 500);
    }
});

Grâce à ce bout de code, lors du chargement de la fancybox, la tentative de centrage va être appelée, la fonction va lors vérifier si la largeur envoyée est différente de la précédente, si oui, elle centre, sinon elle met à jour la nouvelle largeur et se rappelle ….

Ce script constitue une base de travail en fonction de vos besoins et peut s’appliquer à d’autres tâches vous à d’autres problématiques non gérées en natif dans la librairie.