Diaporama dynamique pour mon site

**kasper77** · 28/06/2010, 16h53

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

**SpaceFrog** · 28/06/2010, 17h08

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

**devyan** · 28/06/2010, 17h48

Bonjour,

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**kasper77** · 29/06/2010, 08h28

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.

**SpaceFrog** · 29/06/2010, 08h34

Dans ton pluggin il doit y avoir un code de preload (préchargement) e images ..

cherche un code qui ressemble à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
pic = new Image()
pic.src="chemin/fichier.jpg"

ensuite l'attribution de images se fait par un truc du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#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 ...

**kasper77** · 29/06/2010, 08h53

Merci beaucoup pour ta réponse.

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

Diaporama dynamique pour mon site

JavaScript

Discussions similaires

Partager

Partager