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.

[sekaijin]

avant de se lancer dans le code il serait peut être bien de concevoir son appli
juste histoire de ne pas faire n'importe quoi.

A+JYT

[philub]

concevoir son appli juste histoire de ne pas faire n'importe quoi.

Bonjour,

Si je comprends bien, je dois prévoir les fonctions qui me seront utiles dans le javaScript?
- afficherGrandeImage()
- afficherVignettes()
- lecture()
- encadrerVignette()
- vignetteSuivante()
- vignettePrécédente()




Sinon «concevoir» signifie de faire les fichiers et les dossiers (je crois que cette partie est correcte. Ici, mon objectif est de régler une partie de mon projet qui ne fonctionne pas)? En d'autres mots, j'ai comme un masterPage fonctionnel et j'essai de lui ajouter un morceau galerie.

Pour l'instant, j'ai trouvé beaucoup de chose sur Internet et j'ai fait pas mal de copier/coller.

En fait, il y a une chose qui me bloque en terme de conception. Je suis un débutant et je n'arrive pas encore à anticiper comment faire pour relier des parties de mes fichiers galerie.js et galerie.html

Dans le HTML, je dois mettre des <div> avec un id et dans le javascript ensuite j'envoie l'image?
Par exemple (dans galerie.js):
document.getElementById("grandeImage").src = "/images/3-contenu/galerie-images/" + e.target.id + ".png";


Comment concevoir son application? J'avoue que je ne maîtrise pas les addEventListner, mais je comprends au moins que ça écoute les actions.

[Watilin]

j'ai besoin de vous pour me trouver des exemples qui fonctionnent

À ton service Je viens d'uploader un userscript que j'ai fait il y a quelques années. Il marche avec une extension de type Greasemonkey mais ça devrait être facile de l'adapter en script « normal ».

http://pastebin.com/MBHUFX4d

[philub]

Je pense que j'ai trouvé l'exemple le plus utile.


http://dev.twiip.ch/scripts/gallery/gallery.php


Script développé par Julien Theler