Discussion :

[pol0nium]

Bonjour,

J'utilise actuellement un petit code source trouvé sur ce site :

http://blog.xoransorvor.be/2009/10/1...aleatoirement/

J'aimerai implémenter une transition entre les différentes images. Un fondu par exemple.

Pourriez-vous me donner des pistes pour débuter?

Merci.

[NoSmoking]

Bonjour,
un petit tour dans les contributions http://javascript.developpez.com/demos/fondu/
on en a parler sur ce post...

[pol0nium]

Malheureusement je n'arrive pas à utiliser la solution de Bovino que l'on peut voir ici :
http://www.developpez.net/forums/ano...4f0664316c7a4c

En effet, j'aimerai, en utilisant un seul div, appliquer un fade out dessus puis changer l'image de ce div, et enfin appliquer un fade in pour faire une transition plus douce entre deux images.
Bovino utilise un class_img, ce qui me parait bien compliqué pour mon cas.

Je détaille : voici actuellement le code me permettant d'alterner entre deux images:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var pathImg="http://localhost/test/img/galerie/";
nbrSecondes = 5;
setTimeout('recharge()',nbrSecondes*1000);
var i=0;
function recharge()
{
 
var src = new Array(
pathImg+"image1.jpg",pathImg+"image2.jpg");
 
if(i == src.length)
	i=0;
 
document.getElementById("banner").style.backgroundImage = 'url('+ src[i++]+')';
 
setTimeout('recharge()',nbrSecondes*1000);
}

j'aimerai donc faire quelque chose comme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
fadein();
document.getElementById("banner").style.backgroundImage = 'url('+ src[i++]+')';
fadeout();

Mais il me semble que lorsque je fait un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("banner").style.backgroundImage = 'url('+ src[i++]+')';

la nouvelle image est 100% opaque, on observe donc un clignotement.
Comment y remédier?

[pol0nium]

Problème résolu avec le plugin Jquery "CrossSlide"

http://tobia.github.com/CrossSlide/