Discussion :

[philub]

Bonjour,

Ce que j’essaie de produire:
Visionneuse dynamique
- Sans la librairie JQuery (seulement avec js, css et html). C'est le genre de chose qui n'est pas facile à trouver sur Google.
- Boutons de navigations (suivant, précédent et lecture/pause)
- La grande image dépend de la vignette (thumbnails = petite image) sélectionnée.

- La visionneuse doit être sur le mode "Lecture" au chargement de la page, donc le bouton lecture/pause doit afficher "Pause".
- Indiquer la vignette présentement sélectionnée avec un encadré de couleur. Dans le mode "Lecture" à chaque 3 secondes la vignette change avec la suivante. Une fois arrivé à la dernière vignette, on revient à la première.
- L'utilisateur peut cliquer sur la vignette de son choix pour la faire afficher dans la zone de la Grande image.

Voici un aperçu du résultat final.


HTML

Code html :

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
<div id="galerie">
	<!-- Boutons de naviagation -->
	<div id="btnNavigation">
		<button id="prec">Précédent</button>
		<button id="lect">Lecture</button>
		<button id="suiv">Suivant</button>
	</div>
 
 
	<!-- Image grand format -->
	<p>
		<img id="grandeImage" src="" alt="Image visionnée" title="Image"/>
	</p>
 
 
 
<!-- Liste des vignettes -->
      <div>
	<ul id="galerie_mini">
		<li><p id="img1"><img src="images/3-contenu/galerie-images/vignettes/img-vignette1.png" alt="Amaya" /></p></li>
		<li><p id="img2"><img src="images/3-contenu/galerie-images/vignettes/img-vignette2.png" alt="Ubisoft" /></p></li>
	        <li><p id="img3"><img src="images/3-contenu/galerie-images/vignettes/img-vignette3.png" alt="CGI" /></p></li>
		<li><p id="img4"><img src="images/3-contenu/galerie-images/vignettes/img-vignette4.png" alt="Le titre de la photo 4" /></p></li>
		<li><p id="img5"><img src="images/3-contenu/galerie-images/vignettes/img-vignette5.png" alt="Le titre de la photo 5" /></p></li>
		<li><p id="img6"><img src="images/3-contenu/galerie-images/vignettes/img-vignette6.png" alt="Le titre de la photo 6" /></p></li>
		<li><p id="img7"><img src="images/3-contenu/galerie-images/vignettes/img-vignette7.png" alt="Le titre de la photo 7" /></p></li>
		<li><p id="img8"><img src="images/3-contenu/galerie-images/vignettes/img-vignette8.png" alt="Le titre de la photo 8" /></p></li>
		<li><p id="img9"><img src="images/3-contenu/galerie-images/vignettes/img-vignette9.png" alt="Le titre de la photo 9" /></p></li>
		<li><p id="img10"><img src="images/3-contenu/galerie-images/vignettes/img-vignette10.png" alt="Le titre de la photo 10" /></p></li>	
	</ul>
       </div>
</div> <!-- Fin visionneuse-->

CSS

Code css :

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
#grandeImage
{
	clear:both;
}
 
ul#galerie_mini
{
  margin-left: 30px;
  padding: 0 ;
  list-style-type: none ;
}
 
ul#galerie_mini li
{
  float: left ;
}
 
ul#galerie_mini li p img
{
  margin: 2px 1px -25px;
  border: 1px solid #dcb ;
}

JavaScript

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
window.addEventListener("load",init,false);
 
function init()
{
 
	// Pour les boutons
	document.getElementById("prec").addEventListener("click",reculer,false);
	document.getElementById("suiv").addEventListener("click",avancer,false);
	document.getElementById("lect").addEventListener("click",lecture,false);
 
 
 
 
 
	// Vous prenez chaque vignette et vous écoutez les événements.
	for(i=1;i<=10;i++)
	{
 
		document.getElementById("img"+i).addEventListener("click",afficherGrandeImage,false);
		document.getElementById("img"+i).addEventListener("mouseover",afficherCadreVignette,false);
		document.getElementById("img"+i).addEventListener("mouseout",enleverCadreVignette,false);
 
 
	}
	afficherGrandeImage(e.target.id);
	alert("Ceci est un test");
 
 
 
}
 
 
 
/*
	Afficher l'[image grand format] selon l'id de la [vignette sélectionnée].
*/
function afficherGrandeImage(e)
{
	document.getElementById("grandeImage").src = "/images/3-contenu/galerie-images/" + e.target.id + ".png";
}
 
 
 
// 
 
function afficherCadreVignette(e)
{
	document.getElementById("apercu").src = "images/vignettes/" + e.target.id + ".png";
	//document.getElementById(e.target.id).style.color = "blue";
	e.target.style.color = "blue";
}
 
function enleverCadreVignette(e)
{
	e.target.style.color = "black";
}
 
function avancer(){
 
	noImg++;
 
	if (noImg == captionText.length){
		noImg = 0;
	}
 
	document.getElementById("galerie_mini").src = "images/3-contenu/galerie-images/vignettes/img-vignette" + noImg + ".png";
	document.getElementById("big_pict").innerHTML = captionText[noImg];
 
}
 
 
 
/*
 
*/
function reculer(){
 
	noImg--;
 
	if (noImg == -1){
		noImg = captionText.length - 1;
	}
 
	document.getElementById("galerie_mini").src = "images/3-contenu/galerie-images/vignettes/img-vignette" + noImg + ".png";
	document.getElementById("big_pict").innerHTML = captionText[noImg];
}

En gros, ce projet ne fonctionne pas et j'ai besoin de vous pour me trouver des exemples qui fonctionnent ou pour restructurer le code que je vous présente.