Bonjour,
Je suis en train de finaliser une petite lightbox en javascript et j'ai ajouté le script swipeIt pour ajouter la gestion mobile dans la navigation.
Pour faire simple, la partie HTML se compose d'images miniatures intégrant dans le nom le terme mini avec une classe "mini", lorsqu'on clique sur une de ces images on obtient l'ouverture de l'image en grande vue dans le navigateur. En javascript, je récupère le nom de l'image miniature, je retire le terme miniature, je créé une image dans une div popup et j'injecte quelques infos supplémentaires dont une navigation.
Un peu de code
en html ça donne ça :
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 <div class="galerie"> <img src="images/image1-mini.jpg" alt="image" class="mini"> <img src="images/image2-mini.jpg" alt="image" class="mini"> <img src="images/image3-mini.jpg" alt="image" class="mini"> <img src="images/image4-mini.jpg" alt="image" class="mini"> </div>
Fonction principale du code javascript pour la lightbox:
les fonctions forward et backward rappellent la fonction openPopup avec l'image et l'index +- 1 selon
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 function openPopup(image, index) { if (debug) console.log("index : " + index); // créé l'élément image avec comme source srcImg newImg = document.createElement('img'); newImg.src = image; // newImg.setAttribute("index",index); // insère l'image dans la popup popup.insertBefore(newImg, popup.firstChild); if (navigation) { // éléments de navigation if (nbreImg > 1) { prevElement = document.createElement('div'); prevElement.id = "prev"; prevElement.classList.add("nav_images"); if (index == 0) prevElement.classList.add("desaffiche"); // else prevElement.setAttribute("prev",index-1); popup.insertBefore(prevElement, popup.firstChild); nextElement = document.createElement('div'); nextElement.id = "next"; nextElement.classList.add("nav_images"); if (index == nbreImg - 1) nextElement.classList.add("desaffiche"); // else nextElement.setAttribute("index",index+1); popup.insertBefore(nextElement, popup.querySelector('img').nextSibling); } } //récupère l'image insérée dans la popup var img = popup.querySelector('img'); img.classList.add("lightboxImg"); mySwipeIt=new SwipeIt('.lightboxImg'); mySwipeIt.on('swipeLeft', function () { if (debug) console.log('mySwipeIt is on swipeLeft!'); backward(index); }); mySwipeIt.on('swipeRight', function () { if (debug) console.log('mySwipeIt is on swipeRight!'); forward(index); }); if (debug) console.log(img); // création et insertion n° image + titre s'il existe var numP = document.createElement('p'); numP.id = "numero"; if (imgTitle[index] != "") texte = imgTitle[index] + ' - ' + (index + 1) + '/' + nbreImg; else texte = (index + 1) + '/' + nbreImg; var numTexte = document.createTextNode(texte); numP.appendChild(numTexte); popup.insertBefore(numP, popup.querySelector('img').nextSibling); // fontion desaffiche la popup lors du clic img.onclick = function () { // rétablie l'opacité à 0 et renvoie en arrière plan la popup popup.style.opacity = '0'; popup.style.zIndex = '-5'; // rétablie les ascenseurs de body document.querySelector('body').style.overflow = 'auto'; removeAll(); } if (navigation) { document.getElementById('prev').addEventListener("click", function () { forward(index); }); document.getElementById('next').addEventListener("click", function () { backward(index); }); } }
Donc tout cela fonctionne à merveille. J'intègre donc le deuxième script swipeIt (https://github.com/rodriguezartav/swipeit) de prise en charge de la fonction swipe sur mobile, simple et légère, et j'ajoute les quelques lignes correspondantes
Voici le script swipeIt
Je ne gère pas encore la première image et la dernière image avec le swipe. Je ferai après parce que pour l'instant lorsque je fais mon petit swipe gauche ou droite en simulation sur chrome, il avance et il recule bien l'image mais j'ai une erreur
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125 /*=========================== Swipe-it v1.2.1 An event listener for swiping gestures with vanilla js. https://github.com/tri613/swipe-it @Create 2016/09/22 @Update 2016/09/29 @Author Trina Lu ===========================*/ (function (window, document, exportName) { 'use strict'; var _window = [window]; var _target = false; function SwipeIt(selector) { var _elements = document.querySelectorAll(selector); var _xStart, _yStart, _xEnd, _yEnd; init(); ready(); this.on = function (swipeEvent, callback) { listen(swipeEvent, callback, _elements); return this; } function ready() { //for touching device listen('touchstart', touchStartHandler, _elements); listen('touchmove', touchMoveHandler, _elements); listen('touchend', touchEndHandler, _elements); //for mouse listen('mousedown', mouseDownHandler, _elements); } function init() { _xStart = false; _yStart = false; _xEnd = false; _yEnd = false; _target = false; } function mouseDownHandler(e) { _xStart = e.clientX; _yStart = e.clientY; _target = e.target; listen('mousemove', mouseMoveHandler, _window); listen('mouseup', mouseEndHandler, _window); } function mouseMoveHandler(e) { e.preventDefault(); // **prevent drag event from being triggered** if (!_xStart || !_yStart) return; _xEnd = e.clientX; _yEnd = e.clientY; } function mouseEndHandler(e) { stopListen('mousemove', mouseMoveHandler, _window); stopListen('mouseup', mouseEndHandler, _window); touchEndHandler(e); } function touchStartHandler(e) { _target = e.target; _xStart = e.touches[0].clientX; _yStart = e.touches[0].clientY; } function touchMoveHandler(e) { _xEnd = e.touches[0].clientX; _yEnd = e.touches[0].clientY; } function touchEndHandler(e) { if (_xStart && _yStart && _xEnd && _yEnd) { var h = Math.abs(_xStart - _xEnd); var v = Math.abs(_yStart - _yEnd); var d = 30; if (h > d) { //horizontal var swipeEventString = (_xStart < _xEnd) ? 'swipeRight' : 'swipeLeft'; triggerEvent(swipeEventString, _target); } if (v > d) { //vertical var swipeEventString = (_yStart > _yEnd) ? 'swipeUp' : 'swipeDown'; triggerEvent(swipeEventString, _target); } if (h > d || v > d) { triggerEvent('swipe', _target); } }; init(); } } function listen(event, handler, elements) { for (var i = 0; i < elements.length; i++) { elements[i].addEventListener(event, handler); } } function stopListen(event, handler, elements) { for (var i = 0; i < elements.length; i++) { elements[i].removeEventListener(event, handler); } } function triggerEvent(eventString, elements) { var event = new Event(eventString); if (elements.constructor !== Array) { elements.dispatchEvent(event); } else { for (var i = 0; i < elements.length; i++) { elements[i].dispatchEvent(event); } } } //export window[exportName] = SwipeIt; })(window, document, 'SwipeIt');
J'utilise déjà ce petit script swipeIt dans un slider maison et je créé l'objet mySwipeIt avec toutes les diapos d'un coup, là il n'y a pas de conflit.Envoyé par Erreur
J'imagine que le fait de créer un seul élément mySwipeIt=new SwipeIt('.lightboxImg') et rappeler la fonction avec une nouvelle image (correspondant à celle avant ou après) pose problème ... ? enfin je ne sais pas ... ça dépasse mes compétences et j'ai beau chercher, je ne vois pas trop.
Une petite idée ?
Merci
Loïc
Partager