Un diaporama avec ce framework

Version imprimable

Bonjour,
j'essaie de faire un diaporama avec scriptaculous
A vériter il doit me manquer quelque chose ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="abdoulax" />
<script language="JavaScript" src="./js/scriptaculous/prototype.js" type="text/javascript"></script>
<script language="JavaScript" src="./js/scriptaculous/scriptaculous.js?load=effects" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Visuel</title>
<script language="JavaScript" type="text/javascript">
  function diapo()
{
	var VisuelTab = [
	["img/visuel_2.jpg"],
	["img/visuel_3.jpg"],
	["img/visuel_4.jpg"],
	["img/visuel_5.jpg"],
	["img/visuel_1.jpg"],
	];
	for(i=0; i<VisuelTab.length; i++)
	{
		$('Visuel').innerHTML='VisuelTab[i]';
		Effect.Appear('VisuelTab[i]', {delay:0, duration:4});
		Effect.Fade('VisuelTab[i]', {delay:3, duration:4});
		Effect.Pulsate('VisuelTab[i]', {delay:1.5});
	}
}
</script>
 
</head>
<body onload="diapo();">
<div id="visuel">sqdfghjkhgfdsfghfdsfg</div>
</body>
</html>

Merci

j'ai trouvé par contre je voudrai faire une boucle sur ma fonction mais rien ne se passe ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  function test()
  {
  	var j=10;
  	for(i=0; i<J; i++)
  	{
  	//new Effect.Opacity('div_1', {duration:2, fps:25, from:0, to:1.0});
  	//new Effect.Opacity('div_1', {duration:2, fps:25, from:1.0, to:0.0, delay:3});
	new Effect.Appear('div_1', {duration:2, fps:25, from:0.0, to:1.0});
	new Effect.Fade('div_1', {duration:2, fps:25, from:1.0, to:0.0, delay:6 } );
 
	new Effect.Appear('div_2', {duration:2, fps:25, from:0.0, to:1.0, delay:5});
	new Effect.Fade('div_2', {duration:2, fps:25, from:1.0, to:0.0, delay:11 } );
 
	new Effect.Appear('div_3', {duration:2, fps:25, from:0.0, to:1.0, delay:10});
	new Effect.Fade('div_3', {duration:2, fps:25, from:1.0, to:0.0, delay:16 } );
 
	new Effect.Appear('div_3', {duration:2, fps:25, from:0.0, to:1.0, delay:15});
	new Effect.Fade('div_3', {duration:2, fps:25, from:1.0, to:0.0, delay:21 } );
	}
  }
</script>

28/02/2008, 09h24
E.Bzz

Bonjour,

Citation:

Envoyé par artotal

j'ai trouvé par contre je voudrai faire une boucle sur ma fonction mais rien ne se passe ?

tu définis une variable j=10 mais tu testes une variable J qui n'existe pas ...
JS est d'une sensibilité étonnante par rapport à la casse ;)

A+

Sa ne boucle toujours pas, peut-être parce que je charge la fonction dans la balise body onload="javascript:test();"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  function test()
  {
  	var j=10;
  	for(i=0; i<j; i++)
  	{
  	//new Effect.Opacity('div_1', {duration:2, fps:25, from:0, to:1.0});
  	//new Effect.Opacity('div_1', {duration:2, fps:25, from:1.0, to:0.0, delay:3});
	new Effect.Appear('div_1', {duration:2, fps:25, from:0.0, to:1.0});
	new Effect.Fade('div_1', {duration:2, fps:25, from:1.0, to:0.0, delay:6 } );
 
	new Effect.Appear('div_2', {duration:2, fps:25, from:0.0, to:1.0, delay:5});
	new Effect.Fade('div_2', {duration:2, fps:25, from:1.0, to:0.0, delay:11 } );
 
	new Effect.Appear('div_3', {duration:2, fps:25, from:0.0, to:1.0, delay:10});
	new Effect.Fade('div_3', {duration:2, fps:25, from:1.0, to:0.0, delay:16 } );
 
	new Effect.Appear('div_3', {duration:2, fps:25, from:0.0, to:1.0, delay:15});
	new Effect.Fade('div_3', {duration:2, fps:25, from:1.0, to:0.0, delay:21 } );
	}
  }
</script>

Merci

28/02/2008, 12h32
E.Bzz

Pas de "Javascript:" dans le code des évènements.
Essaye :

Code:

onload="test();"

A+
28/02/2008, 13h10
artotal

sa ne fonctionne pas!
10/12/2008, 21h09
MacGeol

Bonjour,

Je relance la discussion sur le diaporama scroptaculous.
Pour ma part j'ai bien réussi à le faire fonctionner, et il correspond bien à mes attentes.

Cependant, je l'ai intégré à une entête spip dans laquelle je voudrais qu'il apparaisse en fond.
Cependant malgré mes centaines de tentatives de gestion des z-index, le dit diaporama à la fâcheuse habitude de se positionner au-dessus de presque tous les éléments.
Je n'ai pas pris le temps de rentrer dans le code javascript.

Je voulais donc savoir si quelqu'un avait la solution pour forcer ce joli diaporama à passer en fond de page.

Merci beaucoup d'avance!

Citation:

Envoyé par artotal

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  function test()
  {
  	var j=10;
  	for(i=0; i<j; i++)
  	{
  	//new Effect.Opacity('div_1', {duration:2, fps:25, from:0, to:1.0});
  	//new Effect.Opacity('div_1', {duration:2, fps:25, from:1.0, to:0.0, delay:3});
	new Effect.Appear('div_1', {duration:2, fps:25, from:0.0, to:1.0});
	new Effect.Fade('div_1', {duration:2, fps:25, from:1.0, to:0.0, delay:6 } );
 
	new Effect.Appear('div_2', {duration:2, fps:25, from:0.0, to:1.0, delay:5});
	new Effect.Fade('div_2', {duration:2, fps:25, from:1.0, to:0.0, delay:11 } );
 
	new Effect.Appear('div_3', {duration:2, fps:25, from:0.0, to:1.0, delay:10});
	new Effect.Fade('div_3', {duration:2, fps:25, from:1.0, to:0.0, delay:16 } );
 
	new Effect.Appear('div_3', {duration:2, fps:25, from:0.0, to:1.0, delay:15});
	new Effect.Fade('div_3', {duration:2, fps:25, from:1.0, to:0.0, delay:21 } );
	}
  }

Je pense que le problème vient du fait que tous les événements sont joués en même temps. Essaye de faire intervenir j dans le paramètre delay :

Code:

1
2
 
delay : (j+1) * laValeur