1 pièce(s) jointe(s)
Galerie d'images, visionneuse, carrousel, boutons de navigation seulement en JavaScript, CSS et HTML
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.
Pièce jointe 158525
HTML
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
| <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:
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:
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.
Un exemple très similaire à ce que je recherchais
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
