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

[shroomsconect]

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]

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]

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]

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