images qui ne s'affichent pas

**Ella68** · 11/04/2008, 15h35

Bonjour, j'ai fait un album 3D sur un site web, en partant d'un script trouvé sur le net ! Les images tournent autour d'une photo principale et lorsqu'on clique sur une photo, elle s'agrandit au centre. De plus on peut charger une autre galerie en cliquant sur un lien.
L'adresse des images est lue dans un fichier texte contenu dans chaque dossier d'image.
Par contre certaines images (et beaucoup) ne s'affichent pas. Est ce du à l'interpréteur javascript ou autre chose ?

Voila le code du script ajax :

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
 
// JavaScript Document
 
// permet de récupérer un objet HTTPRequest sans tenir compte du navigateur
function getHTTPRequest() {
	if(window.XMLHttpRequest) // Firefox 
	   xhr_object = new XMLHttpRequest(); 
	else if(window.ActiveXObject) // Internet Explorer 
	   xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); 
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   return; 
	} 
	return xhr_object;
}
 
var errorYoAjaxGet = false; 
var finishYoAjaxGet = false; 
var xmlhttpYoAjaxGet; 
 
function YoAjaxGetAssync(url){ 
        xmlhttpYoAjaxGet = getHTTPRequest(); 
        this.url = url; 
        xmlhttpYoAjaxGet.onreadystatechange = recuperer; 
        xmlhttpYoAjaxGet.open("GET",url,false); 
        xmlhttpYoAjaxGet.send(null); 
} 
 
recuperer = function(){ 
        if(xmlhttpYoAjaxGet.readyState == 4){ 
                if(xmlhttpYoAjaxGet.status != 200){// a remplacer par 200 si serveur 0 si local 
                        errorYoAjaxGet = true; 
                } 
                finishYoAjaxGet=true; 
        } 
} 
 
YoAjaxGetAssync.prototype.getResponseText = function(){ 
        while(!finishYoAjaxGet){}; 
        if(!errorYoAjaxGet){ 
                this.res = xmlhttpYoAjaxGet.responseText; 
        } 
        return this.res; 
} 
 
YoAjaxGetAssync.prototype.getResponseXML = function(){ 
        while(!finishYoAjaxGet){}; 
        if(!errorYoAjaxGet){ 
                this.res = xmlhttpYoAjaxGet.responseXML; 
        } 
        return this.res; 
}

Ensuite voici le code de mon 2ème script qui permet de faire tourner les 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
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
 
//Javascript Document
 
var angle=0,ll,hh,bcl,vit=0.01;
var angleInit = angle;
var vitInit = vit;
//taille des vignettes
var taille=80;
//largeur de tout le manège
var largeur=250;
//hauteur de tout le manège
var hauteur=100;
//Le nombre d'images
//nbrimg=19 --> remplcé par pict.length
 
var viewerOn=true; // permet de stopper le viewer lors de l'initialisation d'une galerie.
 
function preloadImages(img) { // préchargement d'une image.
	var d=document;if(!d.p) d.p=new Array();
	var i,j=d.p.length,img; for(i=0; i<img.length; i++)
	d.p[j]=new Image; d.p[j++].src=img[i];
}
 
function preloadImagesTab(tab){ // préchargement d'un tableau dimage
	for(var x=0;x<tab.length;x++){
		preloadImages(tab[x]);
	}
}
 
var pict;
var timerViewer;
 
function setImage(i){ // mise à jour de l'image du centre.
	document.getElementById('viewer').src=pict[i];
}
 
function window_onload(url){
viewerOn=false; // on stop le viewer.
if(timerViewer!=undefined) clearTimeout(timerViewer); // on arrête le timeout en cours
angle = angleInit; // on réinitialise les variables aux valeurs initiales.
vit = vitInit;
this.yoAjaxGetAssync = new YoAjaxGetAssync(url); // récupération de la liste des images à partir du fichier (url)
pict = eval(this.yoAjaxGetAssync.getResponseText());
preloadImagesTab(pict); // préchargement des images.
document.getElementById("viewer").src = pict[0]; // initialisation de l'image centrale.
document.getElementById("content").innerHTML=''; // initialisation de la div qui va accueillir  les images
for(i=1;i<=pict.length;i++){ // création des images
document.getElementById("content").innerHTML+="<img id=i"+i+" src="+pict[i-1]+" onmouseover=\"vit=0.00;\" onmouseout=\"vit=0.01;\" onclick=\"setImage("+(i-1)+");\" class=imag>"
} 
viewerOn=true;
return move();
}
function move(){
if(viewerOn){ // on vérifie qu'il ne faut pas arrêter le viewer
	ll=document.body.clientWidth/2;
	hh=document.body.clientHeight/2;
	document.getElementById("viewer").style.top=hh-150;
	document.getElementById("viewer").style.left=ll-150;
	angle=angle-vit;
	for(i=1;i<=pict.length;i++){
	document.getElementById("i"+i).style.left=ll+largeur*(Math.cos(angle+i*2*Math.PI/pict.length));
	document.getElementById("i"+i).style.top=hh+hauteur*(Math.sin(angle+i*2*Math.PI/pict.length))+document.getElementById("i"+i).width/2;
	agl=angle+i*2*Math.PI/pict.length;
	document.getElementById("i"+i).width=20*(Math.sin(agl))+taille;
	document.getElementById("i"+i).style.zIndex=50*(Math.sin(agl))+100;
	document.getElementById("i"+i).style.opacity=(Math.sin(agl)+1)*0.50;
	document.getElementById("i"+i).style.filter="alpha(opacity="+(Math.sin(agl)+1)*50+")";
	}
	clearTimeout(timerViewer); // on arrête le timeout en cours
	timerViewer = setTimeout("move()",30); // on démarre le nouveau --> celà évite de garder les timeout en mémoire ce qui rique de multiplier les opérations.
}
}

Ensuite j'ai appelé les deux script dans mon Header et dans body :

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
 
<body onload="window_onload('http://http://Serveur/Photothque%20ESBG/viewer/Beaulieu%Production/descripteur1.txt')" bgColor=white>
 
<img src="http://Serveur/Photothque%20ESBG/viewer/Beaulieu%20Production/image1.jpg" id="viewer"  class="viewer" onload="document.getElementById('viewer').style.zIndex=0"><!-- vignetes tournantes du viewer-->
 
<div id='content'></div>
<P align=right><!-- lien vers la galerie1 décrite par le fichier img/descripteur1.txt-->&gt; 
 
<A href="javascript://" onclick='window_onload("http://Serveur/Photothque%20ESBG/viewer/Beaulieu%20Production/descripteur1.txt")'  >Beaulieu Production</a> <!-- lien vers la galerie1 décrite par le fichier img/descripteur2.txt-->
<br>&gt; 
<A href="javascript://" onclick='window_onload("http://Serveur/Photothque%20ESBG/viewer/Catalytic%20Convertor/descripteurCatalytic.txt")'  >Catalytic Convertor</a>
<br>&gt;
<A href="javascript://" onclick='window_onload("http://Serveur/Photothque%20ESBG/viewer/Decoupling%20Element/descripteurDecouplingElement.txt")'  >Decoupling Element</a>
 
</body>

**le_chomeur** · 11/04/2008, 17h47

une démo en ligne de ce qui ne fonctionne pas ??

**KawaJVC** · 11/04/2008, 20h49

Pareil que le_chomeur , il nous faudrait un exemple pour nous faciliter la tâche

**Ella68** · 14/04/2008, 09h40

Je ne peux pas vous faire une démo en ligne car il s'agit d'un intranet !

Par contre, je vais essayer de vous faire deux screenshots pour vous montrer ce qui ne va pas :

1° Voila ce que donne l'affichage à l'écran quand tout marche

2° Voila ce qui se passe quand ca ne marche pas, l'image centrale ne s'affiche pas, et certaines images qui tournent ne s'affichent pas non plus. Pour toutes les afficher, il faut cliquer une à une sur les cadres blancs les contenant et revenir sur le lien pour qu'elles s'affichent toutes :

[img=http://img366.imageshack.us/img366/6625/album3d1yl9.jpg]

**Ella68** · 14/04/2008, 09h44

EDIT :

Image 2 :

http://img176.imageshack.us/img176/7066/album3d2cw9.jpg

**le_chomeur** · 14/04/2008, 10h10

hum essaye avant de faire ton load en ajax , de faire tourner ton script de rotation d'image , en dur

, via une simple page html ...
mais au vu du script je crois qu'il y a un soucis sur le tableau d'initialisation des images

**Ella68** · 14/04/2008, 10h26

Merci le_chomeur !
J'ai essayé déja d'implanter le code de mon script de rotation d'image dans les balise <head></head> de ma page html. J'ai testé aussi dans une page HTML simple, le problème d'affichage est toujours récurrent

Je commence seulement ajax et javascript, selon toi d'où vient le problème dans le tableau d'initialisation ?

**le_chomeur** · 14/04/2008, 10h39

je viens d'essayer le script brut de pomme ( j'ai copier/coller puis remplacer le tableau par un en dur et je ne vois rien tourner ^^ )

aurais tu un exemple de base ? je te l'adapterais en ajax

**Ella68** · 14/04/2008, 10h50

Le seul exemple que j'ai de base, c'est celui là

Chez moi tout tourne. Par contre dans le script si tu teste en local, il faut remplacer

Code :

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

1
2
3
recuperer = function(){ 
        if(xmlhttpYoAjaxGet.readyState == 4){ 
                if(xmlhttpYoAjaxGet.status != 200)

par

Code :

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

1
2
3
recuperer = function(){ 
        if(xmlhttpYoAjaxGet.readyState == 4){ 
                if(xmlhttpYoAjaxGet.status != 0)

Si jamais ca peut t'aider ou t'éclairer plus que moi, voila comment je déclare mes images dans un descripetur :

Code :

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

1
2
3
4
5
6
7
["http://Serveur/Photothque%20ESBG/viewer/Beaulieu%20Production/image1.jpg",
"http://Serveur/Photothque%20ESBG/viewer/Beaulieu%20Production/image2.jpg",
"http://Serveur/Photothque%20ESBG/viewer/Beaulieu%20Production/image3.jpg",
"http://Serveur/Photothque%20ESBG/viewer/Beaulieu%20Production/image4.jpg",
"http://Serveur/Photothque%20ESBG/viewer/Beaulieu%20Production/image5.jpg",
"http://Serveur/Photothque%20ESBG/viewer/Beaulieu%20Production/image6.jpg",
"http://Serveur/Photothque%20ESBG/viewer/Beaulieu%20Production/image7.jpg"]

**le_chomeur** · 14/04/2008, 11h03

^^ le path de tes images n'est pas bon :

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
96
97
98
99
100
101
102
103
104
 
<!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" />
<title>Document sans nom</title>
<script type="text/javascript">
 
//Javascript Document
 
var angle=0,ll,hh,bcl,vit=0.01;
var angleInit = angle;
var vitInit = vit;
//taille des vignettes
var taille=80;
//largeur de tout le manège
var largeur=250;
//hauteur de tout le manège
var hauteur=100;
//Le nombre d'images
//nbrimg=19 --> remplcé par pict.length
 
var viewerOn=true; // permet de stopper le viewer lors de l'initialisation d'une galerie.
 
function preloadImages(img) { // préchargement d'une image.
	var d=document;if(!d.p) d.p=new Array();
	var i,j=d.p.length,img; for(i=0; i<img.length; i++)
	d.p[j]=new Image; d.p[j++].src=img[i];
}
 
function preloadImagesTab(tab){ // préchargement d'un tableau dimage
	alert(tab.length);
	for(var x=0;x<tab.length;x++){
		preloadImages(tab[x]);
	}
}
 
var pict;
var timerViewer;
 
function setImage(i){ // mise à jour de l'image du centre.
	document.getElementById('viewer').src=pict[i];
}
 
function window_onload(url){
viewerOn=false; // on stop le viewer.
if(timerViewer!=undefined) clearTimeout(timerViewer); // on arrête le timeout en cours
angle = angleInit; // on réinitialise les variables aux valeurs initiales.
vit = vitInit;
//this.yoAjaxGetAssync = new YoAjaxGetAssync(url); // récupération de la liste des images à partir du fichier (url)
//pict = eval(this.yoAjaxGetAssync.getResponseText());
pict = new Array("Intertek/Images/Bt_Marine_140px.gif","Intertek/Images/Bt_Marine_140px.gif","Intertek/Images/Bt_Marine_140px.gif","Intertek/Images/Bt_Marine_140px.gif");
 
preloadImagesTab(pict); // préchargement des images.
 
document.getElementById("viewer").src = pict[0]; // initialisation de l'image centrale.
 
document.getElementById("content").innerHTML=''; // initialisation de la div qui va accueillir  les images
for(i=1;i<=pict.length;i++){ // création des images
document.getElementById("content").innerHTML+="<img id=i"+i+" src="+pict[i-1]+" onmouseover=\"vit=0.00;\" onmouseout=\"vit=0.01;\" onclick=\"setImage("+(i-1)+");\" class=imag>"
} 
viewerOn=true;
return move();
}
function move(){
if(viewerOn){ // on vérifie qu'il ne faut pas arrêter le viewer
	ll=document.body.clientWidth/2;
	hh=document.body.clientHeight/2;
	document.getElementById("viewer").style.top=hh-150;
	document.getElementById("viewer").style.left=ll-150;
	angle=angle-vit;
	for(i=1;i<=pict.length;i++){
	document.getElementById("i"+i).style.left=ll+largeur*(Math.cos(angle+i*2*Math.PI/pict.length));
	document.getElementById("i"+i).style.top=hh+hauteur*(Math.sin(angle+i*2*Math.PI/pict.length))+document.getElementById("i"+i).width/2;
	agl=angle+i*2*Math.PI/pict.length;
	document.getElementById("i"+i).width=20*(Math.sin(agl))+taille;
	document.getElementById("i"+i).style.zIndex=50*(Math.sin(agl))+100;
	document.getElementById("i"+i).style.opacity=(Math.sin(agl)+1)*0.50;
	document.getElementById("i"+i).style.filter="alpha(opacity="+(Math.sin(agl)+1)*50+")";
	}
	clearTimeout(timerViewer); // on arrête le timeout en cours
	timerViewer = setTimeout("move()",30); // on démarre le nouveau --> celà évite de garder les timeout en mémoire ce qui rique de multiplier les opérations.
}
}
 
 
</script>
</head>
 
<body>
<img src="Intertek/Images/Bt_Marine_140px.gif" id="viewer" ><!-- vignetes tournantes du viewer-->
 
<div id='content'></div>
<P align=right><!-- lien vers la galerie1 décrite par le fichier img/descripteur1.txt-->&gt; 
 
<A href="javascript://" onclick='window_onload(1)'  >Beaulieu Production</a> <!-- lien vers la galerie1 décrite par le fichier img/descripteur2.txt-->
<br>&gt; 
<A href="javascript://" onclick='window_onload(2)'  >Catalytic Convertor</a>
<br>&gt;
<A href="javascript://" onclick='window_onload(3)'  >Decoupling Element</a>
</P>
 
</body>
</html>

cet exemple fonctionne , remplace les images par tes images en locale

**Ella68** · 14/04/2008, 11h19

En local ca marche bien

Par contre, je dois impérativement chercher les images qui sont stockées sur un serveur pour les afficher sur l'intranet.
Là le tableau d'images est codé en dur, il ne pourra plus redevenir dynamique ?

**le_chomeur** · 14/04/2008, 11h31

si , maintenant qu'on sait que le problème vient du path des images , remet ta méthode ajax en place, en laissant le alert() sur la taille du tableau
s'il affiche bien le nombre d'image , vérifis le chemin des images qui se trouvent dans tes fichiers

**Ella68** · 14/04/2008, 11h59

J'ai laissé le alert(). Il me prend bien en compte toutes toutes les images, mais toujours ce problème d'affichage, donc oui c'est bien le chemin des fichiers qui fout le bordel ! Mais je ne sais pas pourquoi parce que les chemins sont justes !!
Crois tu que je devrais retirer le nom du serveur et juste mettre les noms des dossiers ?

**le_chomeur** · 14/04/2008, 13h18

si les images sont sur le même serveur oui , mais cela n'est normalement pas genant ...

as tu vérifié le chemin des images en passant par ton navigateur ?

**Ella68** · 14/04/2008, 13h26

Oui j'ai verfié les chemins des images et elles s'affichent bien via le navigateur avec l'adresse de l'image sur le serveur.
Les descripteurs sont chacuns dans le dossiers où sont stockées les images dont le descripteur contient l'adresse.
Si jamais, je suis sous Sharepoint, dans une liste où j'ai crée des dossiers, mais cela ne change pas grand chose je suppose !
J'ai regardé aussi si la taille des images étaient génantes, mais rien de se côté là

**le_chomeur** · 14/04/2008, 13h37

aie la ça risque d'être difficile

essaye cette méthode :

Code :

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

1
2
3
4
5
6
7
8
function preloadImagesTab(tab){ // préchargement d'un tableau dimage
	alert(tab.length);
	for(var x=0;x<tab.length;x++){
		var Preload = new Image;
		Preload.src = tab[x];
		document.getElementById('listeImg').appendChild(Preload);
	}
}

en créant une div avec comme id=listeImg

**Ella68** · 14/04/2008, 13h57

Ca va te paraitre terriblement idiot, mais une fois le code rajouter à mon script, dans ma page HTML, c'est bien comme ca que je dois faire ?

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
 
<body>
 
<img src="http://Serveur/Photothque%20ESBG/viewer/Beaulieu%20Production/image1.jpg" id="viewer"  class="viewer" onload="document.getElementById('viewer').style.zIndex=0"><!-- vignetes tournantes du viewer-->
 
<div id='listeImg'></div>
<P align=right><!-- lien vers la galerie1 décrite par le fichier img/descripteur1.txt-->&gt; 
 
<A href="javascript://" onclick='window_onload("http://Serveur/Photothque%20ESBG/viewer/Beaulieu%20Production/descripteur1.txt")'  >Beaulieu Production</a> <!-- lien vers la galerie1 décrite par le fichier img/descripteur2.txt-->
<br>&gt; 
<A href="javascript://" onclick='window_onload("http://Serveur/Photothque%20ESBG/viewer/Catalytic%20Convertor/descripteurCatalytic.txt")'  >Catalytic Convertor</a>
<br>&gt;
<A href="javascript://" onclick='window_onload("http://Serveur/Photothque%20ESBG/viewer/Decoupling%20Element/descripteurDecouplingElement.txt")'  >Decoupling Element</a>
<br>&gt;
 
 </P>
</body>

**le_chomeur** · 14/04/2008, 13h59

oui

**SpaceFrog** · 14/04/2008, 13h59

Code :

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

<A href="#" onclick="window_onload('http://Serveur/Photothque%20ESBG/viewer/Beaulieu%20Production/descripteur1.txt');return false;'  >Beaulieu Production</a>

**le_chomeur** · 14/04/2008, 14h06

pourquoi un return false , en plus du # sur le lien ??

images qui ne s'affichent pas

JavaScript

Discussions similaires

Partager

Partager