Fonctions équivalentes Photos de Windows en javascript

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:

---

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

---

par

Code:

---

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

---

Puis faire une boucle :

Code:

---

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.

Bonjour,
utilise une boucle forEach par exemple

Code:

---

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()