Création d'une lightbox en javascript

Version imprimable

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à :ptdr:
merci à tout le monde
Cyril

ici je vous mets le code javascript (c'est une lightbox toute simple et basique)

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
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);

12/12/2015, 10h26
NoSmoking

Bonjour,
tu crées ta "lightbox" et tu veux afficher à l'intérieur une succession d'images ?

Dans le principe il te faut dans ta "lightbox"
• une fleche +
• une fleche -
• une croix close
• un conteneur pour recevoir l'image

Les actions
• sur fléche + : chargement image suivante dans le conteneur
• sur fléche + : chargement image précédente dans le conteneur
• sur croix close : fermeture "lightbox"

voilà pour un principe de base, il y en a d'autres.

merci c'est résolu

Merci noSmoking pour ta réponse :P

Il me manquait un élément de fermeture bien ciblé.

Et du coup, je suis parvenu à résoudre cette ligntbox ;)

trop cool merci

et pour info je mets le code ici

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
var links = document.querySelectorAll('.lightbox');
    linksLen = links.length;
 
    // on numérote chaque image pour la navigation
for (var i = 0; i < linksLen; i++) {
	links[i].id = i;
}
 
 
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('span');
	prev.id = 'llbox-nav-prev';
	var next = document.createElement('span');
	next.id = 'llbox-nav-next'; 
 
	// element de fermeture
	var close = document.createElement('span');
	close.id = 'llbox-close';
 
	overlay.innerHTML = '';
	overlay.appendChild(img);
	overlay.appendChild(next); 
	overlay.appendChild(prev);
	overlay.appendChild(close);
 
	// clique sur la flèche gauche pour image précédente
	prev.addEventListener('click', function(e) {
		x = link.getAttribute('id');
 
		newlink = document.getElementById(x-1);
		displayImg(newlink);	
 
	}, false);
 
	// clique sur la flèche droite pour image suivante
	next.addEventListener('click', function(e) {
		y = link.getAttribute('id');
		position = parseInt(y);
		newlink = document.getElementById(position+1);
 
		displayImg(newlink);	
 
	}, false);
 
	// pour fermer le conteneur
	close.addEventListener('click', function(e) {
 
		document.getElementById('overlay').style.display = 'none';
 
	}, false);
 
 
 }, false);
 
	img.style.maxHeight = '75%';
	img.style.maxWidth = '75%';
    img.src = link.href;
 
	overlay.style.display = 'block'
 
 
 
}