Manipulation de l'Img Src en fonction de la taille de l'écran

[fourmizen]

Bonjour,
j'essaye d'adapter la taille des images chargées en fonction de la taille de l'écran pour sauver des octets. Pour ce faire, j'utilise JQuery. J'ai déjà la taille de l'écran dans une variable. Voici mon code qui bien sur ne fonctionne pas (hehe sinon j'aurais pas posté ^^):

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
/* Change img src */	
$(document).ready(function() {
 
	 function imageresize() {
		 if (WinHeight < '400'){
 
			var SizePosition = $('.photo').attr('src').search("600"|"900");
			var url1 = $('.photo').attr('src').str.substring(1,SizePosition);
			var url2 = $('.photo').attr('src').str.substring((SizePosition+3));
 
			$('photo').each(function(index) {
				$('.photo').attr('src',url1+'300'+url2);
			});
 
		 } else if (WinHeight > '400' && WinHeight < '850') {
 
			var SizePosition = $('.photo').attr('src').search("300"|"900");
			var url1 = $('.photo').attr('src').str.substring(1,SizePosition);
			var url2 = $('.photo').attr('src').str.substring((SizePosition+3));
 
			$('photo').each(function(index) {
				$('.photo').attr('src',url1+'600'+url2);
			});
 
		 } else if (WinHeight > '850') {
 
			var SizePosition = $('.photo').attr('src').search("300"|"600");
			var url1 = $('.photo').attr('src').str.substring(1,SizePosition);
			var url2 = $('.photo').attr('src').str.substring((SizePosition+3));
 
			$('photo').each(function(index) {
				$('.photo').attr('src',url1+'900'+url2);
			});
 
		 }
	 }
 
	 imageresize();//Triggers when document first loads    
 
	 $(window).bind("resize", function(){//Adjusts image when browser resized
	 imageresize();
	 });
 
 });

Je ne sais pas trop si on peut utiliser les regex dans la fonction search de JS ni si on le fait comme je l'ai fait...J'aurais bien voulu avoir votre aide! Merci bien!

[RomainVALERI]

Envoyé par fourmizen

Je ne sais pas trop si on peut utiliser les regex dans la fonction search de JS ni si on le fait comme je l'ai fait...J'aurais bien voulu avoir votre aide! Merci bien!

Si, justement, search attend une Regexp, ou à défaut une String qu'il va utiliser pour créer une regexp.

Code :

var SizePosition = $('.photo').attr('src').search("600"|"900");

Mais ton "|" n'est pas dans la String, donc JS l'interprète comme étant l'opérateur bitwise. Ce qui produit une conversion numérique automatique sur les opérandes, puis produit le résultat 988. Ce paramètre, fourni à la fonction search, doit être ensuite reconverti automatiquement en chaine puis en Regexp... ? Je ne sais pas mais c'est effrayant

Essaie plutôt ça :

Code :

var SizePosition = $('.photo').attr('src').search(/(600|900)/);

ou ça

Code :

var SizePosition = $('.photo').attr('src').search("(600|900)");

[danielhagnoul]

Bonsoir

FAQ jQuery : Comment puis-je ajuster une image à son conteneur ?

[fourmizen]

Super ! merci pour votre aide. Grâce à vous je m'approche de la solution! Toutefois il me reste un petit problème. Voici mon code actuel :

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
	 function imagereschange() {
 
		 if (WinHeight < 400){
 
			$('.photo').each(function(index) {
				var SizePosition = $('.photo').attr('src').search(/(300|600|900)/);
				var url1 = $('.photo').attr('src').substring(1,SizePosition);
				var url2 = $('.photo').attr('src').substring((SizePosition+3));
				$('.photo').attr('src',url1+'300'+url2);
			});
 
		 } else if (WinHeight > 400 && WinHeight < 850) {
 
			$('.photo').each(function(index) {
				var SizePosition = $('.photo').attr('src').search(/(300|600|900)/);
				var url1 = $('.photo').attr('src').substring(1,SizePosition);
				var url2 = $('.photo').attr('src').substring((SizePosition+3));
				$('.photo').attr('src',url1+'600'+url2);
			});
 
		 } else {
 
			$('.photo').each(function(index) {
				var SizePosition = $('.photo').attr('src').search(/(300|600|900)/);
				var url1 = $('.photo').attr('src').substring(1,SizePosition);
				var url2 = $('.photo').attr('src').substring((SizePosition+3));
				$('.photo').attr('src',url1+'900'+url2);
			});
 
		 }
	 }

le problème provient sans doute du each car il traite toujours la même image et "mange" la nouvelle chaîne :

img 1 : img/photos/portrait/600/portrait-1.jpg
img 2 : mg/photos/portrait/600/portrait-1.jpg
img 3 : g/photos/portrait/600/portrait-1.jpg

et il ne passe pas à portrait-2 en plus! Mais sinon pour les regex et tout ça fonctionne impec maintenant! (et oui l'opérateur bitwise c'est barbare comme concept! )

[Bovino]

Envoyé par fourmizen

le problème provient sans doute du each car il traite toujours la même image

Oui, la première puisque c'est ça que tu lui demandes :

Code :

var SizePosition = $('.photo').attr('src').search(/(300|600|900)/);

Dans cette expression, tu récupères l'ensemble des balises ayant comme nom de classe ".photo" puis tu appliques la méthode attr(), dans ce cas, jQuery considère que c'est au premier élément que la demande s'applique, donc toujours à la première image.
Ce qui est dommage, c'est que tu utilises le paramètre index de each() mais pas le second, qui correspond à l'élément en cours !

Code :

1
2
3
4
5
6
$('.photo').each(function(index, elem) {
	var SizePosition = elem.attr('src').search(/(300|600|900)/);
	var url1 = elem.attr('src').substring(1,SizePosition);
	var url2 = elem.attr('src').substring((SizePosition+3));
	elem.attr('src',url1+'300'+url2);
});

Ceci dit, tu peux aussi t'en passer et utiliser $(this) dans le each(), ce qui revient au même, ou alors juste this, qui correspond à l'élément DOM (donc utiliser l'attribut src et non la méthode

Code :

.attr()

) :

Code :

1
2
3
4
5
6
$('.photo').each(function() {
	var SizePosition = this.src.search(/(300|600|900)/);
	var url1 = this.src.substring(1,SizePosition);
	var url2 = this.src.substring((SizePosition+3));
	this.src = url1+'300'+url2;
});

[fourmizen]

ha ba oui ça semble tellement logique! lol Merci bien en tout cas. Ca fonctionne!

Le seul problème que j'ai c'est que ça ne marche pas quand je veux redimensionner la fenêtre...seulement quand je charge la page... Peut être une autre erreur tout aussi bête dans le code suivant :

Code :

1
2
3
4
5
6
7
$(window).bind('resize', function() {
 
	imagereschange();
	var PhotoHeight = WinHeight*0.78;
	$('.photo').aeImageResize({ height: PhotoHeight });
 
});