Discussion :

[Alex Grenier]

Bonjour à tous et à toutes,

Encore moi! J'ai fait une petite recherche avant de poster mais n'est aps trouver de solution concrète sur le Web. Alors si vous avez des liens tout simplement j'en serais ravis.

voici 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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
function redimImage(inImg, inMW, inMH, lienImg) {	
   var maxWidth = inMW;
   var maxHeight = inMH;
 
			   var dW = 0;
			  	var dH = 0;
 
 
			  	var oImg = new Image();
			  	oImg.src = inImg;
 
			  	/*
			  	var oLabel = new String();
			  	oLabel.String() = lienImg;
				*/
 
			  	var h = dH = oImg.height;
			  	var w = dW = oImg.width;
 
			  	if ((h >= maxHeight) || (w >= maxWidth)) {
			    	if ((h >= maxHeight) && (w >= maxWidth)) {
			      	if (h > w) {
			        		dH = maxHeight;
			        		dW = parseInt((w * dH) / h, 10);
			      	} else {
			        		dW = maxWidth;
			        		dH = parseInt((h * dW) / w, 10);
			      	}
			    	} else if ((h > maxHeight) && (w < maxWidth)) {
			      	dH = maxHeight;
			      	dW = parseInt((w * dH) / h, 10);
			    	} else if ((h < maxHeight) && (w > maxWidth)) {
			      	dW = maxWidth;
			      	dH = parseInt((h * dW) / w, 10);
			    	}
			  	}
 
			  	document.write('<a href="#" onclick="imageLeft(\'' + lienImg + '\'); labelImg(\'' + lienImg + '\');"><img id="' + lienImg + '" src="' + inImg + '" width="' + dW + '" height="' + dH + '" border="0" /></a> <a class="type2" href="#" onclick="imageLeft(\'' + lienImg + '\'); labelImg(\'' + lienImg + '\');">' + lienImg + '</a>');
		};

L'ensemble du code marche .... le ick! c'est que les images ne s'affiche pas si cela prend trop de temps. J'aimerais savoir comment régler le problème afin que toute les images s'affiches.

(En bref si ceci prend trop de temps au browser pour afficher les images, il ne les affichera pas (size 0 - 0)).

Merci d'avance

[SpaceFrog]

soit tu preloade les images, soit tu teste le complete de l'image avec de lancer le reste de la fonction ..

[Alex Grenier]

J'ai trouvé ce bout de code la, j'ai esseyer de l'intégrer mais ca na rien changer.

oublier de dire que j'ai mit ce code dans ma fonction mère redimImage... je ne c'est vraiment pas comment l'appeller et ou l'appeller.

Code :

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

1
2
3
4
5
6
 
 
function estChargee(inImg) {
			  		if(!inImg.complete) setTimeout("estChargee(inImg)", 200);
			  		//alert("Image chargée");
				}

pis on rajoute ca un peu plus bas sous le code qui créer la nouvelle image ( oImg )

Code :

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

1
2
 
estChargee(oImg);

le probleme c'est que quand j'elève l'alert d'entre commentaire tout marche et il m'affiche chaque image mais si je le met entre commentaire il me manque encore des image.

Merci d'avance de méclairer la dessus

[SpaceFrog]

normal ^^
il faut declencher la fonction que tu veux à la place de l'alert ...

[Alex Grenier]

Je l'est modifier comme suit ... cependant il me manque toujours des 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
 
function estChargee(inImg, inMW, inMH, lienImg) {
			  	if(!inImg.complete) setTimeout("estChargee(inImg)", 200);
			  	//alert("Image chargée");
			  	redimImage(inImg, inMW, inMH, lienImg);
		}
 
		function redimImage(inImg, inMW, inMH, lienImg) {	
			//alert("fonction enclaché");
 
				var maxWidth = inMW;
			   var maxHeight = inMH;
 
			   var dW = 0;
			  	var dH = 0;
 
 
			  	var oImg = new Image();
			  	oImg.src = inImg;
 
........ (suite)

ce pourrais t'il que ce soit du au code de redimensionnement de l'image dans le javascript qui bug et n'arrive pas à calculer la grandeur de l'image donc l'affiche à 0x0 pixel. Selon moi c'est presque certainement cela car quand je l'enleve le browser a aucun difficulté à afficher mes 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
 
	var h = dH = oImg.height;
			  	var w = dW = oImg.width;
 
			  	if ((h >= maxHeight) || (w >= maxWidth)) {
			    	if ((h >= maxHeight) && (w >= maxWidth)) {
			      	if (h > w) {
			        		dH = maxHeight;
			        		dW = parseInt((w * dH) / h, 10);
			      	} else {
			        		dW = maxWidth;
			        		dH = parseInt((h * dW) / w, 10);
			      	}
			    	} else if ((h > maxHeight) && (w < maxWidth)) {
			      	dH = maxHeight;
			      	dW = parseInt((w * dH) / h, 10);
			    	} else if ((h < maxHeight) && (w > maxWidth)) {
			      	dW = maxWidth;
			      	dH = parseInt((h * dW) / w, 10);
			    	}
			  	}

Si cette facon de redimensionner ne fonctionne pas auriez vous d'autre alternative pour redimensionner mon image en gardant les proportions.

Merci d'avance pour vos réponse et merci à toi pour m'avoir fait réaliser ma gaffe d'avoir mis ma fonction dans l'autre fonction chu fatiguer et ca parait .

[Alex Grenier]

Bon trouver la solution comme j'utilise http://www.server2go-web.de/ qui permet de mettre du php sur mon CD-Rom j'ai décider de prendre les valeur de la hauteur et de la largeur en php et de les envoyer a mon script javascript pour le resize.

Voici deux parti du code la premiere c'est la fonction javascript qui resize et la seconde mon truc php qui envoie. Si ca peut vous être utilile tant mieux ca vous evitera chercher une alternative javascript et de l'avoir en php. Il ce peut (c'est sure) que le code ne soit pas clean ... j'en suis désolé mais ca fait longtemps j'ai pas programé autre chose que de l'actionscript ou de XHTML/CSS alors j'ai quelque difficulté de ce coter la. si vous voyer des meilleur facon et une maniere de le mettre plus propre n'hésiter pas.

la fonction :

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
 
function estChargee(inImg, largeurImg, hauteurImg, inMW, inMH, lienImg) {
			  	if(!inImg.complete) setTimeout("estChargee(inImg)", 200);
			  	redimImage(inImg, largeurImg, hauteurImg, inMW, inMH, lienImg);
		}
 
		function redimImage(inImg, largeurImg, hauteurImg, inMW, inMH, lienImg) {	
 
				var maxWidth = inMW;
			   var maxHeight = inMH;
 
			   var dW = largeurImg;
			  	var dH = hauteurImg;
 
				var h = dH;
				var w = dW;
 
			  	if ((h >= maxHeight) || (w >= maxWidth)) {
			    	if ((h >= maxHeight) && (w >= maxWidth)) {
			      	if (h > w) {
			        		dH = maxHeight;
			        		dW = parseInt((w * dH) / h, 10);
			      	} else {
			        		dW = maxWidth;
			        		dH = parseInt((h * dW) / w, 10);
			      	}
			    	} else if ((h > maxHeight) && (w < maxWidth)) {
			      	dH = maxHeight;
			      	dW = parseInt((w * dH) / h, 10);
			    	} else if ((h < maxHeight) && (w > maxWidth)) {
			      	dW = maxWidth;
			      	dH = parseInt((h * dW) / w, 10);
			    	}
			  	}
 
			  	document.write('<a href="#" onclick="imageLeft(\'' + lienImg + '\'); labelImg(\'' + lienImg + '\');"><img id="' + lienImg + '" src="' + inImg + '" width="' + dW + '" height="' + dH + '" border="0" /></a> <a class="type2" href="#" onclick="imageLeft(\'' + lienImg + '\'); labelImg(\'' + lienImg + '\');">' + lienImg + '</a>');
		};

le truc php :

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
 
<?php
                                $dir='./images/CH02_JPG';
                                $dossier=opendir($dir);
                                while($fichier=readdir($dossier)){
                                        $berk=array('.', '..');
                                        if(!in_array($fichier,$berk)){
                                                $lien=$dir.'/'.$fichier;
                                                echo '<div class="thumbails">';
                                                if(file_exists($lien)){
                                                        
                                                        $size_img = getimagesize($lien);
                                                        
                                                        echo '<script type="text/javascript">estChargee("'.$lien.'", "'.$size_img[0].'", "'.$size_img[1].'", 100, 100, "'.substr($fichier,0,-4).'");</script>';
                                                }
                                                echo '</div>';
                                        }
                                }
                        ?>

bon le code resize vient pas de moi c'est pris sur le net ... pour le reste j'ai eu de l'aide sur se forum ( grand merci ) et de deux amis chauncey et j-f.

Probablement qu'on pourrais aller directement a la fonction redimImage au lieu de passer par estChargee qui devient inutile maintenant je pense?

sur ce merci et c'est enfin résolu