Fancybox2 légère transparence lors de la transition d’image suivante / précédente de la galerie

J’ai un problème avec Fancybox2, il y a une très légère transparence lors du passage d’une image de la galerie à une autre. Vous pouvez en voir un exemple approximatif sur leur site (les exemples de la Galerie d’images, deuxième rangée): http://fancyapps.com/fancybox/#examples Lorsque l’image passe à la suivante, vous pouvez voir l’arrière-plan pendant très court instant.

Sinon, ce ne serait pas un gros problème, mais sur l’un de mes sites Web, il y a 2 images très similaires, et elles ont un effet de transition “atténuateur” lent, de sorte qu’il semblerait qu’elles tournent en arrière et en avant. Ici, le problème est très prononcé car vous pouvez voir tout le texte du site Web derrière les images lorsque la transition se produit. J’ai essayé de changer diverses choses dans les fancybox .css et .js, mais rien ne semble pouvoir vous aider.

J’ai aussi essayé d’utiliser l’ancienne version de Fancybox 1.x, qui ne pose pas le problème, mais il n’y a pas non plus de fondu enchaîné, de sorte que l’image s’estompe complètement avant que l’image suivante ne commence à apparaître. cela non plus.

Si quelqu’un pouvait comprendre ce qui cause ce petit éclair de transparence, ce serait grandement apprécié. Merci.

Eh bien, j’ai finalement compris, alors je vais simplement mettre ceci ici au cas où quelqu’un d’autre se le demanderait. Il vous suffit de changer l’opacité de 0,1 à 1,0 dans la section suivante du fichier .js de fancybox:

changeOut: function () { var previous = F.previous, effect = previous.prevEffect, endPos = { opacity : 1.0 }, ...

Ainsi, la prochaine image de la galerie sera déjà visible lorsque l’ancienne commencera à disparaître. Évidemment, cela ne devrait être utilisé que pour les images de la même taille avec la transition “fade”. La modification devrait donc être effectuée dans une copie du fichier .js afin qu’il puisse être chargé à tout moment.

edit: Le “startPos.opacity” de la fonction “changeIn” peut également être modifié de 0,1 à 0,0 pour que la transition commence encore plus facilement.

Dans l’exemple que vous citez sur le site Web de fancybox, la superposition de la fantaisie est transparente afin que vous puissiez toujours voir l’arrière-plan. Toutefois, vous pouvez toujours définir l’arrière-plan de la superposition avec une couleur unie.

Méthode 1 (rgba)

 $(".fancybox").fancybox({ helpers: { overlay: { css: { 'background': 'rgba(64, 64, 64, 1)' } } } });

… le dernier chiffre définit la transparence de la superposition de manière à ce que 1 = tout le solide (aucun fond de corps visible), qu’il y ait ou non une transition de fondu lent.

Voir JSFIDDLE

Méthode 2 (hex)

 $(".fancybox").fancybox({ helpers: { overlay: { css: { 'background': '#4a4a4a' } } } });

… définissez une valeur de couleur hexadécimale et la superposition de la boîte de fantaisie sera entièrement pleine (aucun arrière-plan de corps visible).

Voir JSFIDDLE