Bonjour
Dans le cadre de mes travaux de migration vers l'utilisation de jQuery, je pars de la page
http://www.alma-musica.net/html/accueil.html
et je la modifie pour obtenir
http://www.alma-musica.net/tests/alma-accueil.html
Je n'arrive cependant pas à faire fonctionner la galerie de photos en fondu enchaîné.
Comment c'est fait: classiquement, deux images superposées, celle du dessus disparait en fadeOut, à la fin du fadeOut le src de la première est mis à la valeur de la deuxième, son opacité remise à 100%, puis la seconde image est remplacée par la suivante, on laisse affiché un certain temps, puis on relance le fadeOut.
Sur ma version "actuelle" sans jQuery, le fadeOut est réalisé à la mimine: un timer de 10ms modifie la transparence.
Sur ma nouvelle version, voici le code.
Ce qui ne marche pas:
j'ai bien un fadeOut entre la première image et la seconde, mais ensuite les photos s'enchaînent par remplacement instantané.
C'est comme si
la première image partirait bien par défaut de opacity = 100%, le fadeOut la mettrait à 0, et ensuite la première image serait toujours invisible et on verrait les changements instantanés de la deuxième image.
La question est donc:comment remettre l'opacité à 100% sur image1?
Merci de votre aide
Modifié par PapyJP (27 Feb 2015 - 11:07)
Dans le cadre de mes travaux de migration vers l'utilisation de jQuery, je pars de la page
http://www.alma-musica.net/html/accueil.html
et je la modifie pour obtenir
http://www.alma-musica.net/tests/alma-accueil.html
Je n'arrive cependant pas à faire fonctionner la galerie de photos en fondu enchaîné.
Comment c'est fait: classiquement, deux images superposées, celle du dessus disparait en fadeOut, à la fin du fadeOut le src de la première est mis à la valeur de la deuxième, son opacité remise à 100%, puis la seconde image est remplacée par la suivante, on laisse affiché un certain temps, puis on relance le fadeOut.
Sur ma version "actuelle" sans jQuery, le fadeOut est réalisé à la mimine: un timer de 10ms modifie la transparence.
Sur ma nouvelle version, voici le code.
var photoList = [.......]; //liste des images, générée en fait par du PHP
var imageIndex = 1, image1, image2;
var getNextImage = function() {
if(imageIndex >= photoList.length) imageIndex = 0;
image1.src = image2.src;
$(image1).css({opacity:1.0});
image2.src = photoList[imageIndex++];
var TM = window.setTimeout(fadeOut, 3000);
}
var fadeOut = function() {
$(image1).fadeOut(3000, getNextImage);
}
/* et lorsque le document est prêt: */
$(function () {
image1 = $('#image1')[0];
image2 = $('#image2')[0];
image2.src = photoList[0];
getNextImage();
})
Ce qui ne marche pas:
j'ai bien un fadeOut entre la première image et la seconde, mais ensuite les photos s'enchaînent par remplacement instantané.
C'est comme si
$(image1).css({opacity:1.0});
n'avait aucun effet:la première image partirait bien par défaut de opacity = 100%, le fadeOut la mettrait à 0, et ensuite la première image serait toujours invisible et on verrait les changements instantanés de la deuxième image.
La question est donc:comment remettre l'opacité à 100% sur image1?
Merci de votre aide
Modifié par PapyJP (27 Feb 2015 - 11:07)