Soucis resize ie7 et 8 - Carrousel 3d (Mootools)

Bonjour,
Je me permet de créer ce post car je rencontre un soucis sur ie7 et ie8.
(J'utilise ce carrousel => http://mootools.net/forge/p/carousel en mode 3D).

Il utilise donc le style "scale" pour créer un resize dynamique sur les éléments pour créer un effet de profondeur. Seulement IE7/8 ne comprend par cela car c'est du css3. J'ai donc essayer en modifiant les scale par de zoom ou encore en créant des condition pour dire que si la version d'ie était antérieur a ie9 il récupérait la taille de son conteneur pour l'appliquée sur l'image et le span contenant la légende. Mais sans grand succès....

Je me'excuse d'avance car le site n'est pas accessible de l'extérieur vu que c'est sur un serveur de mon entreprise...

Voici un peu les modifs que j'ai essayées (à la ligne.200 du document Carousel.Rotate3D.js)

getStyles: function(el, index) {

var size = el.retrieve(key),
			angle = this.getAngle(index),
		
			sCoeff = 1 + (1-this.options.min) / 2  * (Math.cos(angle)-1),
			width = size.x * sCoeff,
			styles = {
				zIndex: (this.options.zIndex + sCoeff * 2 * this.elements.length).toInt(), 
				left: this.center.x + this.options.xRadius * Math.sin(angle + this.options.offsetAngle) - width / 2,
				top: this.center.y + this.options.yRadius * Math.cos(angle + this.options.offsetAngle)
			};
				
			if(scale) styles[scale] = 'scale(' + sCoeff + ',' + sCoeff + ')';
			else Object.merge(styles, {overflow: 'hidden', height: size.y * sCoeff, width: width })
			
			if(Browser.ie && Browser.version < 9){
				var containerHeight = $('#slide div').getHeight();
				var containerWidth = $('#slide div').getWidth();
				$('#slide div img').setStyles({width: containerWidth, height: containerHeight});
			}
			
			return styles
		}

,

Ou encore :

getStyles: function(el, index) {
		
			
			var size = el.retrieve(key),
			angle = this.getAngle(index),
			
			sCoeff = 1 + (1-this.options.min) / 2  * (Math.cos(angle)-1),
			width = size.x * sCoeff;
			
			var left_size;
			if(Browser.ie && Browser.version < 9){
				left_size=this.center.x + this.options.xRadius * Math.sin(angle + this.options.offsetAngle) - width / 2;
			}else{
				left_size=this.center.x + this.options.xRadius * Math.sin(angle + this.options.offsetAngle);
			}
			
			var styles = {
					zIndex: (this.options.zIndex + sCoeff * 2 * this.elements.length).toInt(),
					left: left_size,
					top: this.center.y + this.options.yRadius * Math.cos(angle + this.options.offsetAngle)
				};
			
			if(Browser.ie && Browser.version < 9){
				Object.merge(styles, {overflow: 'hidden', height: size.y * sCoeff, width: width })
			}else{
				styles[scale] = 'scale(' + sCoeff + ',' + sCoeff + ')';
			}

			return styles
		},

Si quelqu'un a une petite idée de comment faire je suis preneur...

Merci d'avance,
Cordialement BenjH.
Modifié par benjh (30 Jan 2012 - 16:03)