C’est un problème de CSS, je suppose, mais rien de ce que je fais ne force Chrome à placer le contenu de la boîte fantaisie au centre. Pas le centre de l’écran. le centre de la zone d’affichage.
Cela fait-il partie de # fancybox-wrap?
#fancybox-wrap { position: absolute; margin: 20 0 0 20; padding: 20px; z-index: 1101; outline: none; display: none; } J’ai essayé un million de choses, mais seul Chrome ne peut pas pousser le contenu (une image) vers le bas et vers la droite.
OK – voici un peu plus de css qui pourrait être pertinent:
#fancybox-overlay { position: absolute; top: 0; left: 0; width: 100%; z-index: 1100; display: none; } #fancybox-tmp { padding: 0; margin: 0; border: 0; overflow: auto; display: none; } #fancybox-wrap { position: absolute; margin: 20 0 0 20; padding: 20px; z-index: 1101; outline: none; display: none; } #fancybox-outer { position: relative; width: 100%; height: 100%; background: #000; } #fancybox-content { width: 0; height: 0; padding: 0; outline: none; position: relative; overflow: hidden; z-index: 1102; border: 0px solid #000; }
Le html que j’utilise est:
Basculez votre option de type boîte fantaisie en image et vous devriez aller bien. Voici une mise à jour de JSFiddle avec le correctif qui s’annonce bien dans Chrome: http://jsfiddle.net/PY2dU/5/
Code pertinent:
$("#special").fancybox({ 'title' : 'SPECIAL OFFERS', 'width' : 630, 'height' : 465, 'autoScale' : true, 'autoDimensions' : true, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'speedIn' : 200, 'speedOut' : 200, 'overlayShow' : true, 'centerOnScroll' : true, 'easingIn' : 'easeOutBack', 'easingOut' : 'easeInBack', 'type' : 'image' });
Pour ceux qui utilisent une fancybox avec un conteneur div au lieu d’un lien vers une autre page, ce qui a fonctionné pour moi a été d’append le style text-align: center au conteneur. Cela a centré le contenu de la fancybox.
Show Lightbox Now
Et le JS pour le démarrer.
$("#lightbox-link").fancybox({ 'onStart': function() {$("#container").css("display","block");}, 'onClosed': function() {$("#container").css("display","none"); }, });