Un diaporama avec ce framework

**artotal** · 27/02/2008, 15h58

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

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
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

**artotal** · 27/02/2008, 19h04

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

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
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>

**E.Bzz** · 28/02/2008, 09h24

Bonjour,

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+

**artotal** · 28/02/2008, 12h25

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

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
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

**E.Bzz** · 28/02/2008, 12h32

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

Code :

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

onload="test();"

A+

**artotal** · 28/02/2008, 13h10

sa ne fonctionne pas!

**gwyohm** · 11/12/2008, 17h14

Envoyé par artotal

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
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 :

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

1
2
 
delay : (j+1) * laValeur

**MacGeol** · 10/12/2008, 21h09

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!

Un diaporama avec ce framework

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager