Discussion :

[Ella68]

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]

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

[KawaJVC]

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

[Ella68]

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]

EDIT :

Image 2 :

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

[le_chomeur]

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]

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 ?