[JS] Diaporama qui ne se deroule pas correctement

20 décembre 2008 à 21:19:30

Bonjour, mon problème est que mon diaporama n'affiche que très rapidement la première photo puis la dernière, il saute toutes las autres. J'ai plusieurs vignettes permettant de choisir le diaporama que je veux dérouler. Voici mon code.
Merci par avance de votre aide.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
body {
	background-color: #000000;
}
#image {
	position:absolute;
	width:454px;
	height:333px;
	z-index:2;
	visibility:visible;
	top: 231px;
	margin-left: auto;
	margin-right: auto;
	left: 159px;
	background-color: #000000;
}
-->
</style>

// Definir la vitesse slideShowSpeed en millisecondes
var slideShowSpeed = 5000;
// La durée de crossfade en secondes)
var crossFadeDuration = 3;

var Pic1 = new Array()
Pic1[0] = 'diaporama/ambiance/img0.jpg'
Pic1[1] = 'diaporama/ambiance/img1.jpg'
Pic1[2] = 'diaporama/ambiance/img2.jpg'
Pic1[3] = 'diaporama/ambiance/img3.jpg'
Pic1[4] = 'diaporama/ambiance/img4.jpg'

var Pic2 = new Array()
Pic2[0] = 'diaporama/histoire de femmes/img0.jpg'
Pic2[1] = 'diaporama/histoire de femmes/img1.jpg'
Pic2[2] = 'diaporama/histoire de femmes/img2.jpg'
Pic2[3] = 'diaporama/histoire de femmes/img3.jpg'
Pic2[4] = 'diaporama/histoire de femmes/img4.jpg'

function initDiapo(Lot){
var t
var j = 0
var p = Lot.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image();
preLoad[i].src = Lot[i];
}
runSlideShow()
}

function runSlideShow(){
   if (document.all){
      document.images.SlideShow.style.filter="blendTrans(duration=2)";
      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
      document.images.SlideShow.filters.blendTrans.Apply();      
   }
   document.images.SlideShow.src = preLoad[j].src;
   if (document.all){
      document.images.SlideShow.filters.blendTrans.Play();
   }
   j = j + 1;
   if (j > (p-1)) j=0;
   t = setTimeout('runSlideShow()', 5000);
}

</head>
<body>
<img src="images/fond galerie.jpg" width="1000" height="667" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="84,570,172,639" href="#" onclick="initDiapo(Pic1)"/>
<area shape="rect" coords="205,571,294,639" href="#" onclick="initDiapo(Pic2)"/>
<area shape="rect" coords="332,572,420,639" href="#" onclick="runSlideShow()"/>
<area shape="rect" coords="454,571,543,639" href="#" />
<area shape="rect" coords="576,571,664,639" href="#" />
<area shape="rect" coords="698,572,786,639" href="#" />
<area shape="rect" coords="812,571,897,638" href="#" />
</map>
<div id="image">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=318 width=432>

<img src="fichiers de construction/slideshow1_1.jpg" name='SlideShow' width=454 height=333></td>

</tr>
</table>
</div>
</body>
</html>

Tillertan

20 décembre 2008 à 22:26:06

1- document.images.SlideShow, c'est censé pointé vers quoi?
2- Mais mettez ces maudits point virgule en fin d'instruction!! J'aimerais bien voir les abrutis qui font les tutos sans les points vigules.
3- Utilise la balise code la prochaine fois

Anonyme

20 décembre 2008 à 22:30:00

ça irait pas mieux si tu sortais runslideshow() de la boucle for?

Et si tu recodais tout ça proprement aussi (les ";", [] au lieu de new Array() et co.)

lyberty6

20 décembre 2008 à 23:13:26

Merci pour vos réponse, pour document.images.SlideShow, je ne sais pas vers quoi il est censé pointer. J'ai sorti runslideshow() de la boucle for mais cela n'affiche plus d'image.

Golmote

23 décembre 2008 à 1:26:23

Wow mais tu l'as chopé où ton script là ? J'ai des erreurs de déclaration avec Firebug, etc.

Aurais-tu le code HTML complet de ta page stp ? Parce que là de toutes évidences, il doit manquer des bouts...

lyberty6

24 décembre 2008 à 10:13:00

Salut, je viens de mettre à jour mon post avec tout le code de la page.
Merci par avance.

Golmote

24 décembre 2008 à 13:45:57

Je crois que comme ça, normalement ça devrait marcher.

// Definir la vitesse slideShowSpeed en millisecondes
var slideShowSpeed = 5000;
// La durée de crossfade en secondes)
var crossFadeDuration = 3;

var Pic1 = new Array()
Pic1[0] = 'diaporama/ambiance/img0.jpg'
Pic1[1] = 'diaporama/ambiance/img1.jpg'
Pic1[2] = 'diaporama/ambiance/img2.jpg'
Pic1[3] = 'diaporama/ambiance/img3.jpg'
Pic1[4] = 'diaporama/ambiance/img4.jpg'

var Pic2 = new Array()
Pic2[0] = 'diaporama/histoire de femmes/img0.jpg'
Pic2[1] = 'diaporama/histoire de femmes/img1.jpg'
Pic2[2] = 'diaporama/histoire de femmes/img2.jpg'
Pic2[3] = 'diaporama/histoire de femmes/img3.jpg'
Pic2[4] = 'diaporama/histoire de femmes/img4.jpg'

var j=0;
var p=0;
var preLoad = new Array()

function initDiapo(Lot){

p = Lot.length

for (i = 0; i < p; i++){
preLoad[i] = new Image();
preLoad[i].src = Lot[i];
}
runSlideShow()
}

function runSlideShow(){
   if (document.all){
      document.images.SlideShow.style.filter="blendTrans(duration=2)";
      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
      document.images.SlideShow.filters.blendTrans.Apply();      
   }
   document.images.SlideShow.src = preLoad[j].src;
   if (document.all){
      document.images.SlideShow.filters.blendTrans.Play();
   }
   j = j + 1;
   if (j >= p) j=0;
   t = setTimeout('runSlideShow()', 5000);
}

lyberty6

31 décembre 2008 à 9:13:09

Merci, cela fonctionne mais lorsque je clic pour les diaporamas suivants, des photos n'apparaissent qu'une fraction de seconde dans le visionnage et d'autre sont visible normalement. As tu une idée ?