Bonjour à toutes et à tous,
Je suis débutant en javaScript et pour m'exercer (dans le but aussi de personnaliser via css), j'ai commencé à créer ma propre lightbox en javaScript
et si elle fonctionne, je ne comprends pas comment gérer l'événement sur les flèches de navigation (pour passer d'une image à l'autre)
est-ce que quelqu'un aurait une piste ?
ça serait tellement cool, je suis un peu frustré d'en rester là
merci à tout le monde
Cyril
ici je vous mets le code javascript (c'est une lightbox toute simple et basique)
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 var links = document.getElementsByClassName('lightbox'); linksLen = links.length; for (var i = 0 ; i < linksLen ; i++) { links[i].addEventListener('click', function(e) { e.preventDefault(); // On bloque la redirection // On appelle notre fonction pour afficher les images // currentTarget est utilisé pour cibler le lien et non l'image displayImg(e.currentTarget); }, false); } function displayImg(link) { var img = new Image(), overlay = document.getElementById('overlay'); img.addEventListener('load', function() { // creation deux éléments contenant les flèches de navigation var prev = document.createElement('a'); prev.id = 'llbox-nav-prev'; var next = document.createElement('a'); next.id = 'llbox-nav-next'; overlay.innerHTML = ''; overlay.appendChild(img); overlay.appendChild(next); overlay.appendChild(prev); }, false); img.style.maxHeight = '75%'; img.style.maxWidth = '75%'; img.src = link.href; overlay.style.display = 'block'; } document.getElementById('overlay').addEventListener('click', function(e) { // currentTarget est utilisé pour cibler l'overlay et non l'image e.currentTarget.style.display = 'none'; }, false);
Partager