JQuery IE 9 chargement html() et width()

Bonjour,

J'ai développé une galerie photo pour un client, mais il semble que IE 9 lise mal le calcul de width():

Fonctionnement général:

Les thumbs sont chargées dynamiquement via PHP, chaque vignette appelle un preloading Javascript.

Deux <div> viewer assurent les fondus (en alternance).
Au click, je récupère l'id de la vignette et insère l'image dans le viewer inactif
Calcul de la taille de l'image avec width() et positionnement css pour centrer le tout dans un viewer général englobant de taille fixe.

Le problème est que de temps en temps, sur IE 9, width() ne renvoie pas la taille et me voilà avec une position (main - temp) / 2 qui devient (main - 0) / 2 et ma photo se trouve décalée au centre de mon block.

Voilà le code:

$(document).ready(function(){
	// Attente de chargement de toutes les données
	window.onload = function(){
		// Nombre images prŽchargŽes
		var tmp_img_nb = img_tmp_array.length;
		// Définition variable id courant
		var crntId = $('.thumb_main:eq(0)').attr('id');
		// Initialisation No click
		var i = 0;
		// Vitesse animation alpha
		var speed = 800;
		// OpacitŽ
		var opct = .4;
		// Définition viewer courant
		var crntViewer;
		// Alpha 50% sur thumbs
		$('.thumb_main').css({'opacity' : opct});
		//$('.thumb').css({'boxShadow' : '1px 1px 2px rgba(0, 0, 0, .4)'})
		// Alpha 100% sur thumb:eq(0)
		$('thumb_main:eq(0)').css({'opacity':1});
		// SURVOL / HOVER THUMBS: Alpha 100% et retour ˆ 70 % 
		$('.thumb_main').hover(function(){
			$(this).stop().animate({'opacity' : 1}, 300);
		}, function(){
			if($(this).attr('id') != crntId){
				$(this).stop().animate({'opacity' : opct}, 300);
			}
		});
		// CLICK VIGNETTES
		$('.thumb_main').click(function(){
			// Update id courant
			crntId = $(this).attr('id');
			// OPACITƒS THUMBS
			$('.thumb_main').stop().animate({'opacity': opct}, 300);
			// Maintient opacité courante ˆ 100%
			$(this).stop().animate({'opacity':1}, 300);
			// DƒFINITIONS VARIABLES UTILES
			// Simplification acces vierwer0 et 1
			var v0 = $('#viewer0'), v1 = $('#viewer1');
			// Rang sur 2 (0 ou 1)
			var r = i % 2;
			// Rang viewer suivant
			var s = (i + 1) % 2;
			//
			crntViewer = r;
			// Définition position haute sur celle du viewer courant (debute avec 1)
			var y = $('#viewer'+s).css('top');
			$('#viewer'+r).css({'top': y})
			// RŽcupération largeur CSS du viewer principale (conteneur) 
			var viewerWidth = $('#viewer').width();
			// Récupération source image appelŽe
			var src = img_tmp_array[$(this).attr('id')].src;
			// Fondus images principales en fonction du rang
			if(r == 0){
				// Insertion de l'image display block et opacity:0 pour permettre de calculer la taille
				v0.html("<img src='"+src+"' />").css({'display': 'block', 'opacity': 0});
				// Calcul largeur
				var v0ImgWidth = v0.find('img').width();
				// Calcule position dans le viewer général
				var pos = (viewerWidth - v0ImgWidth) /2;
				// Disparition Positionnement
				v0.css({'display':'none', 'opacity': 1,'width':v0ImgWidth, 'position':'absolute', 'right': pos});
				// Fades
				v1.fadeOut(speed);
				v0.fadeIn(speed);
				//alert(v0ImgWidth);
			}else{
				//
				v1.html("<img src='"+src+"' />").css({'display': 'block', 'opacity':0});
				var v1ImgWidth = v1.find('img').width();
				alert('v1: '+v1ImgWidth);
				var pos = (viewerWidth - v1ImgWidth) / 2;
				//
				v1.css({'display':'none', 'opacity': 1, 'width':v1ImgWidth, 'position':'absolute', 'right': pos});
				//
				v0.fadeOut(speed);
				v1.fadeIn(speed);
			}
			//alert($(this).attr('id'));
			$('#viewer_nav_block').appendTo('#viewer'+crntViewer).css({'opacity':0});
			$//('#viewer'+crntViewer).find('img').css({'boxShadow' : '1px 1px 2px rgba(0, 0, 0, .4)'});
			i ++;
})

Ah oui, Tout se passe bien sur FireFox et Safari ne m'a pas encore laisser apparaitre le pb, quand à Opéra... no comment

Si quelqu'un a une idée... HELLLLP !!!!

Sébatien
Modifié par jst (24 May 2012 - 11:34)