Discussion :

[lobarbad]

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:

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

les fonctions forward et backward rappellent la fonction openPopup avec l'image et l'index +- 1 selon

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

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

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

Uncaught TypeError: elements.dispatchEvent is not a function
at triggerEvent (swipe.js:114)
at HTMLImageElement.touchEndHandler (swipe.js:92)
triggerEvent @ swipe.js:114
touchEndHandler @ swipe.js:92

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.
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