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