Discussion :

[yoh43]

Bonjour, j'ai un petit souci avec ce code :

Code :

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

1
2
3
4
5
6
7
var imag="images/"+data_img;
$('#image').attr('src',imag);
$('#image').load(function() {
var h = $("#image").height();
if (h>=650) {$(".centre").css('height', '650px');}
else {$(".centre").css('height', '');}
});

J'ai créé une gallerie d'images avec jquery qui marche bien.
Pour des questions de centrage je voudrais limiter la hauteur de la div quand l'image qui s'affiche dedans par changement de src dépasse.
Le problème avec ce code qui modifie le css

Code :

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

1
2
3
var heig = $("#imag1").height();
if (heig>=650) {$(".centre").css('height', '650px');}
		else {$(".centre").css('height', '');}

c'est que la div s'affiche avant que son style soit modifié sans doute parce que l'image n'est pas encore chargée, d'où mes essais du premier code indiqué avec load() ou ready(), mais ça ne fonctionne pas.

Donc si quelqu'un a une suggestion ?
Merci d'avance

[yoh43]

Bon j'ai trouvé, mais c'est "tricky" :
Le truc était de masquer l'image puis jouer avec l'ordre des callback des fade pour réafficher l'image (imag1) et son contenant (photo)

Code :

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

1
2
3
4
5
6
7
8
9
10
var imaa=data_chemin+data_img;
		$('#imag1').hide();
		$('#imag1').attr('src',imaa);
		$("#imag1").fadeIn('fast',function() {
 
			$('#photo').fadeIn('slow');
			var heig = $("#imag1").height();
			if (heig>=650) {$(".centre").css('height', '650px');}
			else {$(".centre").css('height', '');}
		});

[ABCIWEB]

Salut,

Tu as sans doute vu dans la doc que load n'était pas très adapté pour les images (problème de cache entre autre) et tu t'en sort en utilisant la fonction fadeIn. Bien jouer c'est une bonne option, tu avance assez vite, ça à l'air de te plaire jQuery