Diaporama dynamique pour mon site

Version imprimable

28/06/2010, 16h53
kasper77

Diaporama dynamique pour mon site

Bonjour,

La page d'accueil de mon site ( http://www.lp-jard.fr/spip ) contient actuellement un diaporama en Flash qui fonctionne correctement.

Cependant, pour des raisons d'accessibilité, je voulais savoir si il était possible de trouver un diaporama en JavaScript ou autre, dans lequel le chargement des images dans la page se ferait une par une comme pour celui en flash ???

Merci
28/06/2010, 17h08
SpaceFrog

js ne peut pas aller lire le contenu d'un repertoire, si tu modifies les images du repertoire il faut modifier le script.
tu peux eventuellement assortir un script js d'un fichier paramètres qui contient la liste des noms de fichiers images

Bonjour,

Citation:

Envoyé par SpaceFrog

js ne peut pas aller lire le contenu d'un repertoire, si tu modifies les images du repertoire il faut modifier le script.
tu peux eventuellement assortir un script js d'un fichier paramètres qui contient la liste des noms de fichiers images

On peut peut-être faire quelque chose de ce genre là ...

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
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">		
  <head>
	<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
    <title>Test chargement diaporama</title>
	<script type="text/javascript">
	var imgs = new Array("anciens-e3406.gif",
		"image_acceuil-87b74.jpg",
		"ergotherapeutes-262d7.jpg",
		"240531999-04db2.png",
		"image025-98ba0.jpg"
		);
	var t;	
	function initDiaporama() {
		t = setTimeout("loadDiapo(0)", 1000);
	}
 
	function loadDiapo(ind) {
		var n = ind + 2;
		var ul = document.getElementById("diaporama");		
		var newImg = document.createElement("img");
		newImg.src = imgs[ind];
		newImg.alt = "diapo "+n;
		var newLi = document.createElement("li");			
		newLi.id = "diapo"+n;
		newLi.appendChild(newImg);
		ul.appendChild(newLi);
		if (imgs.length >= ind+1) t = setTimeout("loadDiapo("+(ind+1)+")", 1000);
	}
	</script>
  </head>
  <body onload="initDiaporama();">	
	<ul id="diaporama">
	<li id="diapo1"><img src="image030-a0706.jpg" alt="diapo 1"/></li>
	</ul>
  </body>
</html>

devyan

P.S. : sinon des visionneuses c'est pas ce qui manque je crois :mrgreen:

29/06/2010, 08h28
kasper77

Merci de vos réponses.

Enfaite il existe déja un plugin écrit en JavaScript qui permet d'afficher automatiquement toutes les images du site mais il charge toutes les images en même temps. Donc, plus il y a d'images et plus le temps de chargement de la page est long.

Ce que je cherche, c'est uniquement le moyen de charger les images une par une.

Merci beaucoup.
29/06/2010, 08h34
SpaceFrog
Dans ton pluggin il doit y avoir un code de preload (préchargement) e images ..

cherche un code qui ressemble à
Code:

1 2 3 pic = new Image() pic.src="chemin/fichier.jpg"
ensuite l'attribution de images se fait par un truc du genre

Code:

$('#diaporama'].src=pic.src

l'image est chargée en mémoire ce qui ralentit le chargement de la page mais fluidifie ensuite l'affichage

Tu peux supprimer le preload et attribuer directement les path en src, la page chargera plus vite mais la fluidité de l'affichage s'en ressentira ...
29/06/2010, 08h53
kasper77

Merci beaucoup pour ta réponse.

Je cherche ce que tu m'a dit dans le code et je te tiens au courant.