Erreur dispatchEvent is not a function

**lobarbad** · 14/11/2018, 16h18

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

Envoy� par 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

**shroomsconect** · 15/11/2018, 15h54

Bonjour,

J'ai essay� ton code, mais il ne fonctionne pas.

Le code SwipeIt doit �tre erron�.

Pourquoi adapt� les images sur t�l�phone avec JS, cela devrait �tre fait en CSS automatiquement, avec exemple width: 100%; height: auto;

Quel est le r�sultat demand� ?

Personnellement je ne fait pas confiance au librairie externe, je pr�f�re tout faire moi-m�mes et c'est souvent b�n�fique, malgr� la perte de temps.

**lobarbad** · 15/11/2018, 16h39

Bonjour

merci pour la r�ponse.

la librairie swipeIt permet juste de d�tecter un mouvement de doigt sur mobile, typiquement quand tu balayes avec le doigt pour passer � une autre image, � un autre �cran ... donc vers le bas, le haut, la gauche et la droite.
son utilisation est simplissime et je m'en sers par ailleurs sur un slider maison

Mon but est d'avoir une galerie d'images, et d'agrandir l'image quand on clique dessus en plein �cran (enfin 80vw et 80vh)

c'est s�r, il n'y a pas les css qui vont avec.

Code HTML :

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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Galerie images</title>
    <style>
        * {
            box-sizing: border-box
        }
 
        body {
            background-color: rgb(250, 250, 250);
            margin: 0;
        }
 
        .galerie {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            /*            height:100vh;*/
 
        }
 
        .galerie>img {
            border: 1px dotted #315981;
            padding: 4px;
            background-color: #edfdff;
            flex: 1 1 auto;
            width: auto;
            height: auto;
            max-width: 500px;
            max-height: 130px;
            margin: 5px;
            object-fit: cover;
            transition: transform .15s;
        }
 
        @media screen and (min-width:800px) {
            .galerie>img {
                max-width: 300px;
            }
        }
 
        .galerie:hover>img {
            filter: grayscale(60%) invert(6%) opacity(0.5);
            /*            transform:scale(.95);*/
        }
 
        .galerie>img:hover {
            filter: grayscale(0%);
            /*            transform:scale(1);*/
            cursor: pointer;
        }
 
        .top-top {
            object-position: top;
        }
 
        .top-bottom {
            object-position: bottom;
        }
 
        .top-center {
            object-position: center;
        }
 
        .top-left {
            object-position: left;
        }
 
        .top-right {
            object-position: right;
        }
 
        // lightbox
        div[id="cache"] {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: -10;
            transition: background .15s ease-in-out;
            background-color: transparent
        }
 
        div[id="cache"].cache {
            z-index: 10;
            background-color: rgba(0, 0, 0, 0.75)
        }
 
        div[id="popup"] {
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 100%;
            min-height: 100%;
            width: 100%;
            height: 100%;
            padding: 25px;
            z-index: -5;
            opacity: 0;
            transition: all .1s ease;
            background-color: rgba(0, 0, 0, 0.9)
        }
 
        div[id="popup"]>img {
            max-width: 80vw;
            max-height: 80vh;
            border-radius: 10px
        }
 
        .nav_images {
            z-index: 20;
            position: absolute;
            top: 0;
            min-height: 100%;
            width: 100px;
            padding-bottom: 50px;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            transition: all .2s ease
        }
 
        .nav_images:hover {
            cursor: pointer
        }
 
        div[id="prev"] {
            left: 0
        }
 
        div[id="next"] {
            right: 0
        }
 
        p[id="numero"] {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 10vh;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-style: italic
        }
 
        .desaffiche {
            display: none
        }
 
        .nav_images:hover {
            color: #fff
        }
 
        div[id="prev"] {
            background: transparent url("images/previous.svg") center center no-repeat;
            background-size: 30% 30%
        }
 
        div[id="prev"]:hover {
            background: rgba(0, 0, 0, 0.5) url("images/previous--hover.svg") center center no-repeat;
            background-size: 30% 30%
        }
 
        div[id="next"] {
            background: transparent url("images/next.svg") center center no-repeat;
            background-size: 30% 30%
        }
 
        div[id="next"]:hover {
            background: rgba(0, 0, 0, 0.5) url("images/next--hover.svg") center center no-repeat;
            background-size: 30% 30%
        }
 
        p[id="numero"] {
            background-color: rgba(0, 0, 0, 0.2);
            color: #fff
        }
 
    </style>
</head>
 
<body>
    <div id="popup">
    </div>
    <div class="galerie">
        <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>
 
    </div>
    <script src="js/lightbox.js"></script>
    <script src="js/swipe.js"></script>
 
</body>
 
</html>

Je mets les deux versions d'images dans images/ les miniatures et les versions "grand format". A quoi �a sert ? par exemple quand tu as 25 images sur une page d�j� ne charger que des miniatures plut�t que les images � 10% de leur taille r�elle pour les adapter � 100% sur un m�dia quelconque si l'utilisateur clique dessus.

sinon la lightbox est maison, le seul truc que je ne ma�trise pas c'est al d�tection de mouvement de doigt, j'ai donc r�cup�r� ce petit script swipeIt. Je ne suis pas d�veloppeur, je fais du javascript � un petit niveau, de quoi ajouter quelques fonctionnalit�s sur mes pages web...

sur mon poste �a marche, sur Chrome, Firefox, juste le bug que j'ai d�crit et qui doit �tre du � mon avis � l'appel de la fonction x fois et la d�claration mySwipIt = new swipeIt(element) qui doit rentrer en conflit avec la pr�c�dente ... ? je pense mais comme dit avant l� �a d�passe mes comp�tences...
sinon tant pis je me passerai du mouvement de doigt sur les images en remplacement de la navigation classique par clic, c'�tait juste pour am�liorer l'exp�rience utilisateur sur mobile.

**shroomsconect** · 15/11/2018, 17h55

Je n'arrive vraiment pas � savoir ce qui ne va pas.

Mais sinon, je peu vous donner ce code, cela pourrait vous aider.

ESSAYEZ LE

Exemple de slide tactile :

Code HTML :

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>test</title>
</head>
<body>
       <p id="log"></p>
       <img width="500" src="https://cdn.ila-france.com/wp-content/uploads/2017/01/french-test-1750x660-1.jpg" alt="image">
       <img width="500" src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="image" hidden>
       <img width="500" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="image" hidden>
       <img width="500" src="https://images.pexels.com/photos/46974/muscari-common-grape-hyacinth-blossom-bloom-46974.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="image" hidden>
</body>
<script>
    let img=document.querySelectorAll('img');
    let touch=0;
    let imgTouch=null;
 
    let log=document.getElementById("log");
 
    for(let i=0;i<img.length;i++){
    img[i].addEventListener('touchstart',
    (e)=>{
        imgTouch=e.target;
      touch=e.changedTouches[0].clientX;});
 
 
    img[i].addEventListener('touchend',
    (e)=>{
        if(touch>e.changedTouches[0].clientX){
        if(imgTouch.nextElementSibling.tagName==="IMG"){
            imgTouch.hidden=true;
          imgTouch.nextElementSibling.hidden=false;}
 
        log.innerHTML="GAUCHE";
      }else if(touch<e.changedTouches[0].clientX){
        if(imgTouch.previousElementSibling.tagName==="IMG"){
            imgTouch.hidden=true;
          imgTouch.previousElementSibling.hidden=false;}
 
        log.innerHTML="DROITE";
      }});
    }
</script>
</html>

PS : Pour info, si vous n'avez de t�l�phone, il est possible d'utiliser votre navigateur web en tactile sur pc avec la souris.
Avec Firefox, F12 puis appuyer sur l'ic�ne (un t�l�phone sur une tablette) � droite avant la croix et les trois points (c'est la vue adaptative), ensuite appuyer sur l'ic�ne (une main) en haut � droite de aucune limitation de la bande passante.

**NoSmoking** · 15/11/2018, 19h26

Bonjour,
dans l'instruction mySwipeIt=new SwipeIt('.lightboxImg') le param�tre pass� est le s�lecteur permettant de r�cup�rer les �l�ments devant �tre trait�s

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
function SwipeIt(selector) {
    var _elements = document.querySelectorAll(selector);
    var _xStart, _yStart, _xEnd, _yEnd;
    // la suite

on ne trouve aucune trace dans ton code HTML d'�l�ments ayant une classe lightboxImg.

Pour d�boguer place un console.log(elements) dans la fonction triggerEvent.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
function triggerEvent(eventString, elements) {
    console.log(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);
        }
    }
}

Erreur dispatchEvent is not a function

JavaScript

Discussions similaires

Partager

Partager