[Javascript] Problème carrousel et navigateurs

Bonjour à tous,

J'ai créé un site web pour une entreprise, à l'intérieur j'y ai mis un carrousel gratuit en javascript que j'ai trouver sur internet. Je l'ai ensuite adapté a mon site, l'animation de ce carrousel fonctionne très bien sous Firefox mais ne fonctionne absolument pas sous Chrome et Safari...

Quelqu'un pourrait il m'aider ? après plusieurs jours de recherche je n'ai pas avancé...

Je vous joint mon code .js si cela peut vous aidé.

var count = 0; 
var baseSpeed = 0.05; 
var radiusX = 400; 
var radiusY = 80; 
var centerX = 300; 
var centerY = 1000;
var speed = 0.3;
var imageDivs = '';
var numberOfElements = 0;
var carousel = '';
var speedTest = '';


window.addEvent('domready', function(){
  
	carousel = $('carousel');
	speedTest = $('speedTest');

	imageDivs = carousel.getElementsByTagName("div"); 
	numberOfElements = imageDivs.length; 
	
	setInterval('startCarousel()',40);
	
	

});

function onMouseMove(evt) {
	
	tempX = evt.client.x;
	speed = (tempX - centerX) / 2500;
	
}

function startCarousel(){
	
	for(i=0; i < numberOfElements; i++){
	
		angle = i * ( Math.PI * 2 ) / numberOfElements;
	
		imageDivsStyle = imageDivs[ i ].style; 
		imageDivsStyle.position='absolute'; 
		
		posX = ( Math.sin( count * ( baseSpeed * speed ) + angle )* radiusX + centerX );
		posY = ( Math.cos( count * ( baseSpeed * speed ) + angle )* radiusY + centerY );
		
		
		imageDivsStyle.left = posX+"px"; 
		imageDivsStyle.top = posY+"px"
		
		imageDivWidth = posY/3;
		imageDivZIndex = Math.round(imageDivWidth)+100;
		
		imageDivsStyle.width = imageDivWidth+'px';
		imageDivsStyle.zIndex = imageDivZIndex;
		
		angle += speed;
	
	}
	
	count++
}

Merci d'avance.

Antoine2011

Ce qui m'étonne plus, c'est que ca fonctionne sous firefox.

window.addEvent, à ma connaissance, ça n'existe dans aucun navigateur et ca ne peux pas marcher. A partir de la, quelques pistes :

- tu as d'autres librairies js chargées qui auraient pu définir la fonction window.addEvent?
- la "vrai" fonction, c'est window.addEventListener, et le nom de l'évènement "DOMContentLoaded" (pas "domready"). Mais tous les navigateurs ne gérent pas ca très bien, une solution compatible avec tous les navigateurs est un peu plus complexe.

Le plus simple sinon, c'est un lien vers le site en question. Tu peux aussi regarder toi-même avec les outils pour les développeurs de chrome si tu trouves quelque chose.

Je n'ai utilisé aucune autre bibliothèque js dans mon site ça ne peut donc pas venir de là...

Voila un lien vers la page de mon site qui contient le carrousel si cela peut te servir : http://www.astral-lyon.com/WordPressAstral/?main=Promotions

Avec l'outil de débogage de Chrome j'ai une erreur (Uncaught TypeError: Object [object Object] has no method 'styleSwitcher' ) mais je ne sais absolument pas comment la résoudre...

Merci de ton aide !
Modifié par antoine2011 (12 Aug 2013 - 17:19)

Lol. Ya juste 2 versions de jquery, un mootools, un jquery ui, un wp ui, zoombox.js et ton carousel :-p.

Bon du coup, window.addEvent & domready devraient fonctionner grâce à mootools, mais l'évènement n'a pas l'air d'être déclenché dans chrome. J'y connais pas grand chose à Mootools, donc en solution rapide je te suggérerais bien de passer à jquery pour cette partie de ton code (vu qu'il st la, autant en profiter )

En remplacant

window.addEvent('domready', function(){
  
	carousel = $('carousel');
	speedTest = $('speedTest');

	imageDivs = carousel.getElementsByTagName("div"); 
	numberOfElements = imageDivs.length; 
	
	setInterval('startCarousel()',40);
});

par

$(function(){
  
	carousel = $('carousel');
	speedTest = $('speedTest');

	imageDivs = carousel.getElementsByTagName("div"); 
	numberOfElements = imageDivs.length; 
	
	setInterval('startCarousel()',40);
});

ca devrait marcher un peu mieux.

Sinon, dans Chrome & Firefox tu as un erreur "jQuery.styleSwitcher is not a function". A prioris ca a pas l'air plus grave que ca, mais bon. Si tu essayes de la résoudre, c'est probablement un plugin jquery qui n'est pas chargé..

Je ne m'y connais pas non plus en Mootools... J'ai essayer en local avec la partie de code que tu m'as fait passer et malheureusement ça ne fonctionne toujours pas... ni sur Chrome ni sur Safari.

À quoi servent une tonne de bibliothèques JS pour des trucs aussi simples. S'il y a que ce bout de code, elles ne sont quasiment pas utilisées.
Si ton slideshow a comme ID "carousel" (et je crois que ça prend deux "r") ça peut se faire sans bibliothèque JS ajouté, sans colorants ni conservateurs.

function addEvent(a,b,c,d){d = !d && false;(a.addEventListener)?a.addEventListener(b,c,d):a.attachEvent('on'+b,c);}

var count = 0; 
var baseSpeed = 0.05; 
var radiusX = 400; 
var radiusY = 80; 
var centerX = 300; 
var centerY = 1000;
var speed = 0.3;
var imageDivs = '';
var numberOfElements = 0;


addEvent(window, 'load', function(){

	imageDivs = document.querySelectorAll("#carousel>div"); 
	numberOfElements = imageDivs.length; 
	
	setInterval(startCarousel, 40);
	
});

function onMouseMove(evt) {
	
	tempX = evt.client.x;
	speed = (tempX - centerX) / 2500;
	
}

function startCarousel(){
	
	for(i=0; i < numberOfElements; i++){
	
		angle = i * ( Math.PI * 2 ) / numberOfElements;
	
		imageDivsStyle = imageDivs[ i ].style; 
		imageDivsStyle.position='absolute'; 
		
		posX = ( Math.sin( count * ( baseSpeed * speed ) + angle )* radiusX + centerX );
		posY = ( Math.cos( count * ( baseSpeed * speed ) + angle )* radiusY + centerY );
		
		
		imageDivsStyle.left = posX+"px"; 
		imageDivsStyle.top = posY+"px"
		
		imageDivWidth = posY/3;
		imageDivZIndex = Math.round(imageDivWidth)+100;
		
		imageDivsStyle.width = imageDivWidth+'px';
		imageDivsStyle.zIndex = imageDivZIndex;
		
		angle += speed;
	
	}
	
	count++
}

Merci beaucoup Zelalsan, ce que tu m'as donné fonctionne parfaitement ! Merci a toi aussi Sephitan pour la peine que tu a pris a chercher !
Modifié par antoine2011 (12 Aug 2013 - 18:16)