maths pour resize d'images

Version imprimable

17/09/2012, 17h08
CaviarNAS

maths pour resize d'images

Salut tout le monde ...
Bon j'ai un problème de matheux ... et je n'arrive pas à trouver l'algo...ou comment faire

voila, en simplifiant la problématique ça donne ça
j'ai une div.imagecollection de 800px de large dans laquelle je peux faire apparaitre des images (avec un append)
chaque image qui apparait peut avoir une largeur et une hauteur différente.
certaines sont horizontales, d'autres verticales etc ...

bon j'aimerai qu'à chaque nouvelle image chargée, toutes les tailles des images soient recalculées de façon à ce qu'elles aient toutes la même hauteur et qu'elles occupent la largeur maximale disponible dans mes 800px (sachant qu'en plus on a 5px de marge à droite pour chaque image)

vous voyez le truc de dingue ... alors j'essaye de calculer de ratios et tout ça mais je trouve pas la logique ...

si vous avez un pote prof de math ... lol
thanks

@++
17/09/2012, 17h10
SpaceFrog

tu peux t'inspirer de ça
http://j-reaux.developpez.com/tutori...sionner-image/
17/09/2012, 18h02
CaviarNAS

salut...
merci mais en fait c'est beaucoup plus complexe que ça comme problématique ...
ça n'a l'air de rien mais c'est la galère...
du redimensionnement proportionnel c'est facile à faire... mais calculer un resize en hauteur contraint à une zone d'une certaine largeur en fonction d'un nombre variable d'images dans cette zone ... c'est autrement plus difficile ...

en gros j'essaye de faire la même chose que sur ce site
mailerlite.fr avec l'outil "ajouter des images" si ça peut vous faire mieux comprendre la problématique ...

thanks

Pour vous donner une idée j'en suis là mais ça marche pas

Code:

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
 //resize les image dans un bloc images
 function sizeImgBlock (imagescolection) {
		imgs = $(imagescolection).find('img');
 		nbimg = $(imgs).length;
 
 		trace(imgs);
 		trace(nbimg);
 
 		trace('maxw=' + maxw); //largeur  de ma div containeur
 		trace('maxh=' + maxh); //hauteur de ma div containeur
 
 		maxratio = 0;
 
 		$.each(imgs, function (index, value) {
 
			//on cherche l'image la plus large		
			w = parseInt($(this).width());
			h = parseInt($(this).height());
 
 
			ratioh = h/w; //la hauteur = x fois la largeur
 
 
			if ( ratioh > maxratio ) {
				maxratio = ratioh;
				trace ('ratioh='+ratioh);
				trace ($(this).attr('id')+' '+w+' '+h);
 
				//hauteur finale maximale de la div containeur
				hmax = maxw * maxratio ;
				trace ('hmax='+hmax);
 
				wration = maxw / hmax ;
				trace ('wration='+wration);
			}
 
 
 		});
 
		$.each(imgs, function (index, value) {
					//$(this).css('width', parseInt((maxw / (nbimg)) - (5 * (2 - 1))));
 
					w = parseInt($(this).width());
					h = parseInt($(this).height());
 
				trace ('w='+w);
				trace ('h='+h);
 
				localratio = w / h ; //ratio de mon image
 
				//resize des miages
 
				$(this).css('height', parseInt(hmax / ( localratio)));
				$(this).css('width', '');
			});
 
 
 	//	$(imagescolection).css('height', $(imagescolection).find('img').height());
 }

18/09/2012, 08h48
SpaceFrog

ha tu veux dire que tes images sont toutes présentes en même temps dans la zone ?
Je n'avais pas compris cela.

Il existe un plugin jquery qui s'appelle equalize, c'est peut etre une piste, mettre tes images dans des divs et les equalisez ...

sinon il existe des plugins de "wall" http://creotiv.github.com/jquery-photowall/example.html
18/09/2012, 10h26
CaviarNAS

salut.
Oui les images sont toutes présentes dans la zone.
j'ai par exemple 3 images qui se chargent les unes à côté des autres
une de 100 par 200
une de 500 par 50
et une de 1500 par 300

et je veux qu'elles se resizent en gardant leurs proportions respectives pour prendre un maximum de largeur dans une zone qui fait 700 de large en ayant toutes la même hauteur

j'ai regardé les plugins dont tu parles mais ça ne gère pas cette problématique malheureusement :'(
18/09/2012, 10h56
SpaceFrog

peut être ce plugin là alors ?
http://masonry.desandro.com/

la solution si ça peut aider ;)

Code:

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
105
106
107
108
109
110
111
112
113
114
 
 //resize les image dans un bloc images
 function sizeImgBlock (imagescolection) {
 
		imgs = $(imagescolection).find('img');
 
		$(imgs).removeAttr('style');
		$(imgs).removeAttr('width');
		$(imgs).removeAttr('height');
 
 
 		nbimg = $(imgs).length;
 
		trace ('-------sizeImgBlock------------');
 		trace(imgs);
 		trace(nbimg);
 
		maxw = $(imagescolection).width();
 		trace('maxw=' + maxw); //largeur  de ma div containeur
 
 		grandeHauteur = 0;
 		LargeurTotale = 0;
 		total_ratio = 0;
 
 		$.each(imgs, function (index, value) {
 
			trace ($(this));
 
			src = $(this).attr('src');
			//on cherche l'image la plus large		
			//w = parseInt($(this).width());
			//h = parseInt($(this).height());
			w = getImgWidth(src);
			h = getImgHeight(src);
 
			trace ('w='+w);
			trace ('h='+h);
 
			if (h > grandeHauteur) {
				grandeHauteur = h ;
			}
 
 		});
 
 
		trace ('grandeHauteur='+grandeHauteur);
 
		//j'ai la grande heuteur, je resize les images à cette hauteur pour calculer la largeur totale
 
		$.each(imgs, function (index, value) {
 
 
 
			trace ('--boucle largeur totale--');
			trace ($(this));
 
 
			ih = $(this).height();
			iw = $(this).width();
			trace ('ih='+ih);
			trace ('iw='+iw);
 
			//$(this).width( ($(this).width() * ( ih / grandeHauteur) )  );
 
			ratiolocalh =  ih / grandeHauteur ;
			trace ('ratiolocalh='+ratiolocalh);
 
			trace ('largeur de cette image si agrandie pour avoir la taille de la plus haute');
			largagr = iw / ratiolocalh;
 
			//on resize ;
			$(this).width(largagr);
			$(this).height(grandeHauteur);
 
			trace ( largagr );
			//largeur totale de la bande d'images si elles avaient toutes la hauteur de la plus haute
			LargeurTotale = LargeurTotale + largagr;
 
		});
 
		trace ('LargeurTotale='+LargeurTotale);
 
		//ratio entre la largeur maximale et la largeur totale de la bande d'images
		ratioLargeurs =  maxw / LargeurTotale  ;
 
		trace ('ratioLargeurs='+ratioLargeurs);
 
		//on resize toutes les images en foncion du ratio largeur
		$.each(imgs, function (index, value) {
 
 
			trace ('--boucle resize final--');
			trace ($(this));
			iw = $(this).width() ;			
			ih = $(this).height() ;		
 
			nextw =  iw * ratioLargeurs ;
			nexth =  ih * ratioLargeurs ; //grandeHauteur * ratioLargeurs
 
			trace ('iw='+iw);
			trace ('nextw='+nextw);
			trace ('nexth='+nexth);
 
			$(this).attr(  'width','' ) ;
			$(this).attr(  'height','' ) ;
			//je lève 5 px de marge
			$(this).css('width',  parseInt(nextw) -5 ) ;
			$(this).css('height', parseInt( nexth) -5 ) ;
 
		});
 
 
 		$(imagescolection).css('height', $(imagescolection).find('img').height());
 }