Discussion :

[petitours]

Bonjour

Je suis grand débutant en Javascript

Je cherche à remplir une variable

Code :

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

1
2
3
4
5
<script type="text/javascript"> 
 
alert(" Ca marche ! ");
 
var tableau = new Array();

avec le contenu d'un foreach smaty.

Le code HTML qui fonctionne en utilisant ce smaty est

Code :

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

1
2
3
4
<{foreach item=elt from=$block.elt}>
      <img src="<{$elt.image}>" width="150" height="80" border="0" alt="<{$elt.url}>"  /><br />
       <br />
      <{/foreach}>

J'ai tenté des choses qui ne s’exécutent pas (j'ai vu que c’était en erreur avec la console de firefox (je connais que ca et le alrt("") pour debugger
par exemple

Code :

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

1
2
3
4
 
	< {foreach item=elt from=$block.elt}>
        tableau[ <{$elt}>] = "<{$elt.image}>"
	< {/foreach}>

Merci par avance pour votre coup de pouce

[arnogues]

Avant toute chose, regarde le code HTML que ton code smarty te génère, donc affiche le code source de ta page (clic droite => code source de la page)
et là tu comprendras mieux tes erreurs

[SpaceFrog]

La question à te poser, c'est que veux tu mettre dans ton array ??? du code HTML ou veux tu faire un preloader d'images avec des objets image ??

[petitours]

Bonjour

<{$elt.image}> me donne le chemin complet de l'image "http://monsite/cavt5320c62ce952d.jpg" sans les apostrophes, je l'avais vu

mais ca ne me dit pas pourquoi

Code :

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

1
2
3
< {foreach item=elt from=$block.elt}>
        tableau[ <{$elt}>] = "<{$elt.image}>"
	< {/foreach}>

est en erreur.
Je ne sais pas comment débuger le truc en fait. La console me dit que j'ai une erreur là dessus mais ça ne me dit pas quelle erreur ni pourquoi.
Si je laisse le foreach sans le remplissage du tableau

Code :

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

1
2
< {foreach item=elt from=$block.elt}>
	< {/foreach}>

Ca me met une erreur aussi, du coup je ne suis pas plus avancé le problème semble venir rien de ce foreach (pas syntaxé comme il faut pour javascript ???)

Y a t-il moyen d'avoir plus d'informations sur le debug du javascript ? (je rappelle que je suis grand débutant en javascirpt)

@SpaceFrog : ce que je compte faire c'est remplir la var tableau avec les chemins des images contenues dans le foreach de manière à pouvoir utiliser la suite de mon code

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
unction swapImage(){ 
 
	var el = document.getElementById("mydiv"); 
 
	el.innerHTML=caption[i]; 
 
	var img= document.getElementById("slide"); 
 
	img.src= image[i];  
 
	if(i < NbImage ) { i++;}  
 
	else  { i = 0; } 
 
	setTimeout("swapImage()",2000);  
}

qui vient remplir le src d'une image
(c'est le code d'un slideshow basique que j'ai pompé sur internet)

[SpaceFrog]

pour renseigner l'array il faut boucler en js
Mais tu n'as pas répondu à ma question ...

je suppose que tu veux faire un preloader au vu du code ...

Code :

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

1
2
3
4
5
6
7
8
 
preloadimg=new Array();
var i=-1;
<{foreach item=elt from=$block.elt}>
preloadimg[++i]= new Images();
preloadimg[i].src= "<{$elt.image}>";
preloadimg[i].alt="<{$elt.url}>";
<{/foreach}>

[petitours]

je n'ai pas compris la question a laquelle je devais répondre...

j'ai cru le faire en écrivant

ce que je compte faire c'est remplir la var tableau avec les chemins des images contenues dans le foreach

[SpaceFrog]

mhhh ne fait non l'incrément doit se faire avec smarty

Et je ne sais pas commet marche smarty ...

Dans la théorie ça donnerait un truc comme ça ...

Code :

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

1
2
3
4
5
6
7
preloadimg=new Array();
<{ variableincrement =-1}>
<{foreach item=elt from=$block.elt}>
preloadimg[<{ ++variableincrement}>]= new Images();
preloadimg[<{ variableincrement}>i].src= "<{$elt.image}>";
preloadimg[<{ ++variableincrement}>].alt="<{$elt.url}>";
<{/foreach}>

[petitours]

Le code que j'ai récupéré et qui fonctionne avec des images statiques est ceci

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<div style="text-align: center;">
    <{literal}>
<script type="text/javascript"> 
 
alert(" lancement ");
 
var i = 0; 
var image = new Array();   
 
// LIST OF IMAGES 
image[0] = "image_1.gif"; 
image[1] = "image_2.gif"; 
image[2] = "image_3.gif";  
 
 
//Specify the slider's images
 
var NbImage = image.length-1;    
 
var caption = new Array(); 
 
// LIST OF CAPTIONS  
 
caption[0] = "Caption for the first image"; 
caption[1] = "Caption for the second image"; 
caption[2] = "Caption for the third image";  
 
function swapImage(){ 
 
	var el = document.getElementById("mydiv"); 
 
	el.innerHTML=caption[i]; 
 
	var img= document.getElementById("slide"); 
 
	img.src= image[i];  
 
	if(i < NbImage ) { i++;}  
 
	else  { i = 0; } 
 
	setTimeout("swapImage()",2000);  
} 
 
function addLoadEvent(func) { 
 
var oldonload = window.onload; 
 
if (typeof window.onload != 'function') { 
 
window.onload = func; 
 
} else  { 
 
window.onload = function() { 
 
if (oldonload) { 
 
oldonload(); 
 
} 
 
func(); 
 
} 
 
} 
 
}  
 
addLoadEvent(function() { 
 
swapImage(); 
 
});  
 
 
</script> 
    <{/literal}>
 
<table style="border:3px solid #00aaff;background-color:#00aaaa;"> 
<tr>
	<td> 
		<img name="slide" id="slide" alt ="my images" src="image_1.gif"/> 
	</td> 
</tr> 
 
<tr> 
	<td align="center"style="font:small-caps bold 15px georgia; color:blue;"> 
		<div id ="mydiv"></div>  
	</td> 
</tr>
 
</table>
</div>

et le contenu du foreach smarty est visible nickel en faisant ceci

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<{foreach item=partner from=$block.partners}>
      <a href="<{$xoops_url}>/modules/xoopspartners/vpartner.php?id=<{$partner.id}>" target="_blank">
      <{if $partner.image != ""}>
      <img src="<{$partner.image}>" width="150" height="80" border="0" alt="<{$partner.url}>"  /><br />
      <{/if}>
      <{$partner.title}>
      </a>
      <{if $block.insertBr != ""}>
      <br />
      <{/if}>
      <br />
      <{/foreach}>

du coup je ne pense pas qu'il soit nécessaire de charger un objet image, juste de remplir le tableau image avec le chemin des images.

[SpaceFrog]

ce n'est qu'un conseil ...

mais si tu ne charges que le string src dans ton array, les images ne sont pas chargées? Ainsi lorsque tu modifieras le src dynamiquement pour la première fois, le navigateur ne chargera l'image qu'a ce moment là. tu auras donc une latence.
Si par contre tu passe par des new Image() l'image sera déja chargée et le swap immédiat.

[petitours]

compris ll'histoir du préchargement

j'ai testé ceci qui semble passer le chargement du foreach (qui est enfin plus en erreur de syntaxe !!!)
j'ai juste du remplacer le new Images() par new Image()

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
35
36
<script type="text/javascript"> 
 
alert(" lancement ");
 
var i = 0; 
 
preloadimg=new Array();
var r=-1;
<{foreach item=partner from=$block.partners}>
preloadimg[++r]= new Image();
preloadimg[r].src= "<{$partner.image}>";
preloadimg[r].alt="<{$partner.url}>";
<{/foreach}>
 
var NbImage = preloadimg.length-1;    
 
// LIST OF CAPTIONS  
var caption = new Array(); 
caption[0] = "Caption for the first image"; 
caption[1] = "Caption for the second image"; 
caption[2] = "Caption for the third image";  
 
function swapImage(){ 
 
	var el = document.getElementById("mydiv"); 
	el.innerHTML=caption[i]; 
 
	var img = document.getElementById("slide"); 
	img.src= preloadimg[i].src;  
 
	if(i < NbImage ) { i++;}  
 
	else  { i = 0; } 
 
	setTimeout("swapImage()",2000);  
}

Problème, sur la ligne

Code :

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

mg.src= preloadimg[i].src;

ca me met que

TypeError: preloadimg[i] is undefined

s'il a pu le remplir, comment ne peut il le trouver pas défini après ?

[SpaceFrog]

que donne le code source javascript généré ?

[petitours]

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<script type="text/javascript"> 
 
alert(" lancement ");
 
var i = 0; 
 
preloadimg=new Array();
var r=-1;
preloadimg[++r]= new Image();
preloadimg[r].src= "http://www.id3e.fr/logoComplet1.png";
preloadimg[r].alt="http://www.id3e.fr";
preloadimg[++r]= new Image();
preloadimg[r].src= "http://www.jaguar-mark.fr/uploads/avatars/cavt5320c62ce952d.jpg";
preloadimg[r].alt="http://www.68hc08.net";
preloadimg[++r]= new Image();
preloadimg[r].src= "http://www.jaguar-mark.fr/uploads/avatars/blank.gif";
preloadimg[r].alt="http://www.jaguar-mark.fr";
 
var NbImage = preloadimg.length-1;    
 
// LIST OF CAPTIONS  
var caption = new Array(); 
caption[0] = 'Caption for the first image'; 
caption[1] = "Caption for the second image"; 
caption[2] = "Caption for the third image";  
 
function swapImage(){ 
 
	var el = document.getElementById("mydiv"); 
	el.innerHTML=caption[i]; 
 
	var img = document.getElementById("slide"); 
	img.src= preloadimg[i].src;  
 
	if(i < NbImage ) { i++;}  
 
	else  { i = 0; } 
 
	setTimeout("swapImage()",2000);  
} 
 
function addLoadEvent(func) { 
 
var oldonload = window.onload; 
 
if (typeof window.onload != 'function') { 
 
window.onload = func; 
 
} else  { 
 
window.onload = function() { 
 
if (oldonload) { 
 
oldonload(); 
 
} 
 
func(); 
 
} 
 
} 
 
}  
 
addLoadEvent(function() { 
 
swapImage(); 
 
});  
 
 
</script> 
 
 
<table style="border:3px solid #00aaff;background-color:#00aaaa;"> 
<tr>
	<td> 
		<img name="slide" id="slide" alt ="my images" src="image_1.gif"/> 
	</td> 
</tr> 
 
<tr> 
	<td align="center"style="font: bold 15px ; color:blue;"> 
		<div id ="mydiv"></div>  
	</td> 
</tr>
 
</table>

ça a pas l'air bien joli le preloadimg[++r]

Je viens d'essayer d'ajouter un <{literal}> autour du script mais ca me met une syntaxe error sur le foreach...

[SpaceFrog]

la partie preload est correcte :

http://jsfiddle.net/tu9LW/

regarde en console tu as bein les objets image avec les bon src et alt ...

[petitours]

avec ceci

Code :

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

1
2
3
4
5
<{foreach item=partner from=$block.partners}>
preloadimg[<{$partner.id}>]= new Image();
preloadimg[<{$partner.id}>].src= "<{$partner.image}>";
preloadimg[<{$partner.id}>].alt="<{$partner.url}>";
<{/foreach}>

ca semble mieux initialiser le preloadimg

Code :

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

1
2
3
4
5
6
7
8
9
preloadimg[1]= new Image();
preloadimg[1].src= "http://www.id3e.fr/logoComplet1.png";
preloadimg[1].alt="http://www.id3e.fr";
preloadimg[2]= new Image();
preloadimg[2].src= "http://www.jaguar-mark.fr/uploads/avatars/cavt5320c62ce952d.jpg";
preloadimg[2].alt="http://www.68hc08.net";
preloadimg[3]= new Image();
preloadimg[3].src= "http://www.jaguar-mark.fr/uploads/avatars/blank.gif";
preloadimg[3].alt="http://www.jaguar-mark.fr";

un

Code :

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

1
2
var NbImage = preloadimg.length-1;
alert(NbImage);

me donne bien 3, j'espère que ca répond à la question "regarde en console tu as bein les objets image avec les bon src et alt ... "

mais j'ai toujours l'erreur TypeError: preloadimg[i] is undefined

Je ne comprends pas ce que je dois voir sur le lien fourni jsfiddle

Merci pour le coup de main

[petitours]

une piste peut être

dans la fonction swapImage() où l'appel de preloadimg[i] n'est pas reconnu, j'ai aussi le tableau caption qui ne l'est pas. Ca ne me met pas d'erreur sur la console mais tout ce que retourne

Code :

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

1
2
var el = document.getElementById("mydiv"); 
	el.innerHTML = caption[i] ;

s'affiche undefined dans le code HTML

rappel, voici le code complet JS + html

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<script type="text/javascript"> 
 
alert(" lancement ");
 
var i = 1; 
 
preloadimg=new Array();
var r = -1;
<{foreach item=partner from=$block.partners}>
preloadimg[<{$partner.id}>]= new Image();
preloadimg[<{$partner.id}>].src= "<{$partner.image}>";
preloadimg[<{$partner.id}>].alt="<{$partner.url}>";
<{/foreach}>
 
var NbImage = preloadimg.length-1; 
 
 
// LIST OF CAPTIONS  
var caption = new Array(); 
caption[0] = "Caption for the first image"; 
caption[1] = "Caption for the second image"; 
caption[2] = "Caption for the third image";  
 
function swapImage(){ 
	var el = document.getElementById("mydiv"); 
	el.innerHTML = caption[i] ;
 
	var img = document.getElementById("slide"); 
	img.src= preloadimg[i].src;  
 
	if(i <= NbImage ) { i++;}  
 
	else  { i = 1; } 
 
	setTimeout("swapImage()",2000);  
} 
 
function addLoadEvent(func) { 
 
var oldonload = window.onload; 
 
if (typeof window.onload != 'function') { 
 
window.onload = func; 
 
} else  { 
 
window.onload = function() { 
 
if (oldonload) { 
 
oldonload(); 
 
} 
 
func(); 
 
} 
 
} 
 
}  
 
addLoadEvent(function() { 
 
swapImage(); 
 
});  
 
 
</script> 
 
 
<table style="border:3px solid #00aaff;background-color:#00aaaa;"> 
<tr>
	<td> 
		<img name="slide" id="slide" alt ="my images" src="image_1.gif"/> 
	</td> 
</tr> 
 
<tr> 
	<td align="center"style="font: bold 15px ; color:blue;"> 
		<div id ="mydiv"></div>  
	</td> 
</tr>
 
</table>

[SpaceFrog]

http://jsfiddle.net/tu9LW/2/