Discussion :

[boteha]

Bonjour,

L'application Phptps de Windows offre deux fonctionnalités très intéressantes.

Taille de l'image modifiable avec la molette.

Déplacement de l'image au clic droit enfoncé dès que l'image dépasse de son cadre.

J'aimerais les mêmes fonctions dans un Carroussel HTML / CSS.

Ce codepen montre le code HTML et CSS que j'aimerais ne pas changer.

Premier problème, si je veux que toutes les images soient zoomable, je suppose qu'il faut remplacer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

const tutti = document.querySelector ('figure > img')

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

const tutti = document.querySelectorAll ('figure > img')

Puis faire une boucle :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

for (let i = 0; i < tutti.length; i++)

De façon très bizarre je n'arrive pas à faire fonctionner cette boucle.

Avez-vous idée d'une solution ?

Merci d'avance.

[NoSmoking]

Bonjour,
utilise une boucle forEach par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
const tutti = document.querySelectorAll ('figure > img');
tutti.forEach((img) => {
  console.log(img.getAttribute("src"))
});

Pourquoi vouloir appliquer sur chaque image les événements ?

Ressource :

NodeList.prototype.forEach()

[boteha]

Bonjour NoSmoking,

MERCI pour le suivi.

Je fais ta boucle foreach et cela fonctionne.

Voir le codepen.

Pourquoi vouloir appliquer sur chaque image les événements ?

Toutes les images du carrousel doivent être zoomables.
Cela répond à ta question ?

Deuxième étape le style du cursor.

Grab à l'apparition de l'image.
Grabbing si clic gauche
Revient à grab si la clic est arrêté.


Si clic sur image 2 ou 3 elle apparaît, est zoomable, mais le clic provoque l'apparition de l'image 1, comme sir le focus était perdu.

J'ai ajouté ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
const imgs = document.querySelectorAll("figure > button");
const imgFocused = [];
for (but of imgs) {
but.addEventListener("blur", function () {
document.querySelector('figure > button:has(> img[src="' + imgFocused[0] + '"])').focus();
});
but.addEventListener("mousedown", function () {
imgFocused[0] = this.querySelector('img').getAttribute('src');
document.querySelector('figure > button:has(> img[src="' + imgFocused[0] + '"])').focus();
});
}

Je reviens plus tard pour la partie la plus difficile qui est le déplacement de l'image agrandie avec mousedown et mousemove.

[NoSmoking]

Toutes les images du carrousel doivent être zoomables.
Cela répond à ta question ?

cela n'empêche qu'un seul événement sur le conteneur suffirait à gérer les différentes fonctionnalité. Cependant la structure que tu utilises ne te le permet pas sans certains contorsionnent !

Un exemple de structure simple pourrait-être comme sur cet exemple fourni jadis pour une autre raison :

Événement animationend...

Je reviens plus tard pour la partie la plus difficile qui est le déplacement de l'image agrandie avec mousedown et mousemove.

Je te conseille d'utiliser tout de suite les « Pointer events »

Ressource :

Les événements de pointeur

[boteha]

Bonjour NoSmoking,

Merci de ton suivi, je le découvre seulement maintenant car je n'ai pas reçu ou zappé l'alerte par mail.

cela n'empêche qu'un seul événement sur le conteneur suffirait à gérer les différentes fonctionnalité. Cependant la structure que tu utilises ne te le permet pas sans certains contorsionnent !

Tu as sûrement raison mais je n'ai pas envie de toucher à ma structure qui fonctionne bien et vite.

Je te conseille d'utiliser tout de suite les « Pointer events »

Merci de l'info.

Je reviens vers vous dès que j'ai le temps d'avancer.

[boteha]

Bpnjour,

Pour l'instant je laisse de côté les Pointer events, j'essaye d'avancer sur la base du code pour déplacer l'image par clic gauche et enfoncé et déplacement de la souris.

À vrai dire j'ai trouvé un web-componant qui fait le boulot.

Mais pour diverses raisons, la première étant de rester sur un JS simple, je n'ai pas envie d'un web-componant.

J'aimerais donc adapter le code du web-componant pour mon JS simple.
Mon niveau en JS n'est pas énorme, je n'y arrive pas.

Il y d'un côté le codepen.

D'un autre côté le code du Web-componant :

Code javascript :

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
class ZoomableImage extends HTMLElement {
    constructor() {
        super()
        this.img = document.createElement('img')
        this.appendChild(this.img)
 
        this.currentScale = 1
        this.pos = { x: 0, y: 0  }
        this.start = { x: 0, y: 0  }
        this.isDragging = false
    }
 
    connectedCallback() {
        if (this.hasAttribute('src')) {
            this.img.src = this.getAttribute('src')
 
        }
        this.classList.add('zoomable-image')
        this.bindEvents()
    }
 
    bindEvents() {
        this.addEventListener('wheel', e => this.onWheel(e))
        this.addEventListener('mousedown', e => this.onMouseDown(e))
        this.addEventListener('mousemove', e => this.onMouseMove(e))
        this.addEventListener('mouseup', () => this.onMouseUp())
        this.addEventListener('mouseleave', () => this.onMouseLeave())
    }
 
    onWheel(e) {
        e.preventDefault()
        const MIN_SCALE = 1
        const MAX_SCALE = 5
        const zoomSpeed = 0.0015
        const oldScale = this.currentScale
 
        this.currentScale -= e.deltaY * zoomSpeed
        this.currentScale = Math.min(Math.max(this.currentScale, MIN_SCALE), MAX_SCALE)
 
        const rect = this.getBoundingClientRect()
        const dx = e.clientX - rect.left - rect.width / 2
        const dy = e.clientY - rect.top - rect.height / 2
        this.pos.x -= dx * (this.currentScale / oldScale - 1)
        this.pos.y -= dy * (this.currentScale / oldScale - 1)
 
        this.updateTransform()
    }
 
    onMouseDown(e) {
        if (this.currentScale <= 1) return
        this.isDragging = true
        this.start.x = e.clientX - this.pos.x
        this.start.y = e.clientY - this.pos.y
        this.style.cursor = 'grabbing'
    }
 
    onMouseMove(e) {
        if (!this.isDragging) return
        this.pos.x = e.clientX - this.start.x
        this.pos.y = e.clientY - this.start.y
        this.updateTransform()
    }
 
    onMouseUp() {
        this.isDragging = false
        this.style.cursor = 'grab'
    }
 
    onMouseLeave() {
        this.isDragging = false
        this.style.cursor = 'grab'
    }
 
    updateTransform() {
        if (this.currentScale === 1) {
            this.pos.x = 0
            this.pos.y = 0
        }
        this.img.style.transform = `translate(${this.pos.x}px, ${this.pos.y}px) scale(${this.currentScale})`
    }
}
 
customElements.define('zoomable-image', ZoomableImage)

J'ai entré dans le codepen le code pour le grossissement de l'image, celui pour l'aspect du pointeur.

Pouvez-vous m'aider pour le déplacement de l'image ?

Merci d'avance.