diaporama javascript qui se décompose

Version imprimable

02/03/2009, 10h04
antonito

diaporama javascript qui se décompose

Bonjour,

J'ai un petit problème avec mon diaporama que j'ai d'ailleurs trouvé sur ce forum. L'image a tendance à mal se déplacer, et à se décomposer en partie, légèrement mais parfaitement perceptible et donc ça gache le diapo.
Comment est ce que je peux résoudre ça ? La taille des images peut-être ? la vitesse de défilement ??

Voila l'url: http://plan-univ.lescigales.org/testie.htm

merci
02/03/2009, 10h08
SpaceFrog

Sous FFX3 je ne vois pas de problème particulier,
Essaye de passer tes images en png, elle seront plus légères ...

Autre chose mais n'ayant rien à voir avec le problème, éclaircit un peut tes photos, elle sont un peu trop sombre et ce n'est pas des plus esthétiques ...
02/03/2009, 10h08
Bovino

Rien vu de particulier...
Pourrais-tu préciser un peu ce que tu entends par "se décomposer" ?
02/03/2009, 17h50
antonito

alors apparemment, et pour ne pas changer, le problème est uniquement avec internet explorer. Maintenant ça dépend des config de l'ordi (j'ai testé sur plusieurs) la décomposition est parfois moins marqué mais ça me gâche quand même le diapo. C'est au 2/3 des photos en partant du haut et ça se voit particulièrement au niveau de la barre qui les sépare.

Sapcefrog > merci pour le conseil mais ce n'est pas des photos définitive, c'est juste pour le test du diapo.
02/03/2009, 18h25
Auteur

bonjour,

Je vois ce que tu veux dire : il y a un crénelage des photos lors du déplacement. Il est très net sous IE effectivement.

J'ai vu que tu avais réglé les paramètres "pas" et "tempo" au minimum... Essaye de jouer sur ces paramètres : mettre tempo à 0 et augmenter le pas ou le contraire (la variable pas doit être quand même strictement supérieure à 0, sinon ça ne défile pas).
02/03/2009, 19h06
antonito

salut auteur,

j'obtiens de bons résultats sur IE6 en 1280x800 par contre firefox est beaucoup plus lent comparé à IE...
En 1680x1050 et IE7 j'ai toujours un léger crénelage mais ya du mieux.
Par contre dès que je fixe un pas supérieur à 1 ça redevient comme avant. Et faire varier les valeurs de tempo ne changent pas grand chose. J'ai essayé l'inverse aussi avec tempo à 0 et joué sur les valeurs de pas mais ca n'a rien donné de bon.
04/03/2009, 17h35
antonito

comment ça passe chez vous avec IE ?
04/03/2009, 19h49
SpaceFrog

Avec quoi ? :aie:
04/03/2009, 20h09
antonito

internet explorer 6 7 8 peu importe..
04/03/2009, 20h12
antonito

mais c'est beaucoup trop lent en fait ! Donc ça règle grosso modo le problème de crénelage mais le défilement est maintenant beaucoup trop lent...

Help please :aie:
04/03/2009, 20h12
SpaceFrog

ha y'a plusieurs version en plus ? non je vois pas :aie:
04/03/2009, 21h15
antonito

désolé si je m'y suis mal pris quelque part (remontage du message ?), pas la peine de me faire tourner en rond.
04/03/2009, 22h06
Auteur

Là je t'avoue que je ne sais pas comment améliorer ce script pour ton diaporama :oops:

Les seuls paramètres qui gèrent la vitesse de déplacement sont "pas" et "tempo".
=> Pour un pas constant, si tempo augmente, la vitesse de défilement ralentit.
=> Pour un tempo constant, si pas augmente, la vitesse de défilement augmente (en fait l'image se déplace de x pixels à chaque timeout).

Comme tu as réglé tempo au minimum (donc vitesse maximale de défilement), la vitesse de défilement est directement liée à la vitesse d'exécution du script et à la variable pas. Si tu as réduit le pas pour éviter le crénelage (et donc un défilement lent), là ton défilement correspond à la vitesse d'exécution du script.

je constate que ce script atteint rapidement ses limites :oops:
05/03/2009, 20h14
antonito

Bon je viens de visionner sur un autre ordi encore, ca reste largement acceptable au niveau du crénelage le temps de trouver mieux.
Par contre, comme je disais c'est très très lent sur firefox.
Est-ce que c'est possible de sélectionner un tempo différent selon le navigateur ?
En css je sais qu'on peut adapter sa feuille de style selon le navigateur mais pour javascript j'y connais pas grand chose.
Merci.
06/03/2009, 08h27
SpaceFrog

peut être que passer par les background permettrait de contourner ce souci ??

soit en générant une image très large avec gdlib en collant les images les unes à coté des autres ou en generant des divs collés les un aux autres avec les images en background url ...
J'ai pas testé mais ça peut être une piste ??
06/03/2009, 08h58
le_chomeur

Salut a tous j'arrive un peu tardivement :)

Mais pourquoi ne pas passer par un conteneur en relative et des images positionnée en absolute avec un positionnement par left ??

La tu passe par scrollleft pour positionner tes images ...
06/03/2009, 09h11
Auteur

Citation:

Envoyé par le_chomeur

Salut a tous j'arrive un peu tardivement :)

Mais pourquoi ne pas passer par un conteneur en relative et des images positionnée en absolute avec un positionnement par left ??

La tu passe par scrollleft pour positionner tes images ...

J'utilise le scrollLeft pour justement faire défiler (et donc positionner à un instant t) les images.
06/03/2009, 09h14
le_chomeur

positionner a un instant T ??

regarde les fonctions defileImage() et deroule() :

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
45
46
47
48
49
 
		// Détermination du sens de défilement des images et des distances à parcourir
		function deroule()
		{
			var distance;
 
			conteneur = document.getElementById("conteneur");
			distance = conteneur.scrollWidth / tabImg.length;
 
			if (conteneur.scrollLeft + distance >=conteneur.scrollWidth)
			{
				sens = -1;
			}
 
			if (conteneur.scrollLeft<distance)
			{
				sens = 1;
			}
 
			posFin = conteneur.scrollLeft + sens * distance;
			chrono = setTimeout("defileImage()", tempo);
		}
 
		// Défilement des images
		function defileImage()
		{
			conteneur.scrollLeft = conteneur.scrollLeft + sens * pas;	
 
			if (sens == 1)
			{
				if (conteneur.scrollLeft<posFin)
				chrono = setTimeout("defileImage()", tempo);
				else
				chrono = setTimeout("deroule()",attente);
			}
			else
			{
				if (conteneur.scrollLeft>posFin)
				chrono = setTimeout("defileImage()", tempo);
				else
					chrono = setTimeout("deroule()",attente);
 
			}
 
 
			// Pour debugage ;-)
			/*document.getElementById('idTest').innerHTML=conteneur.scrollTop + " / " + posFin;*/
 
		}

Les images sont dans un tableau qui se trouve lui même dans un div avec un overflow.
J'agis sur le scrollLeft (sa barre de défilement) du div pour faire défiler les images.

06/03/2009, 09h23
le_chomeur

vi vi j'ai bien vu ^^
mais pourquoi ne pas utiliser le positionnement plutôt que le scroll ?
je pense que ce serait plus fluide ...
06/03/2009, 09h33
Auteur

Ah je crois je n'avais pas bien compris ton idée :oops:

Tu veux utiliser la propriété style.left au lieu de scrollLeft c'est ça ?
Disons que j'utilise le scroolLeft car je me suis toujours un peu méfié des propriétés absolute et relative (sans doute parce que je les maîtrise mal :oops: ; et j'ai rarement obtenu le même résultat avec IE et FF avec ces attributs :aie:).

Mais c'est une possibilité ;)
06/03/2009, 09h34
SpaceFrog

et si ça marche pas faut essayer en background ...
08/03/2009, 18h48
antonito

Ok mais ce que vous dites ce sont des modif à faire au niveau du code js pas au niveau css ? Je suis un peu largué en js, j'ai lu des tuto mais pas suffisamment de connaissances pour modifier un code de ce genre.
Sinon je me demande si un diapo en flash ne serait pas un peu plus solide.
Bref à voir, merci quand même.
08/03/2009, 19h03
Auteur

Citation:

Envoyé par antonito

Sinon je me demande si un diapo en flash ne serait pas un peu plus solide.
Bref à voir, merci quand même.

navré que ce script ne réponde pas à tes attentes :(