Etsy : galerie photo aux flèches du clavier
Permet de feuilleter les photos du produit avec les flèches gauche et droite, sans souris.
Code à copier
// Browse the listing photo gallery with the left/right arrow keys
function thumbs() {
return Array.from(document.querySelectorAll(
'[data-component="listing-page-image-carousel"] '
+ 'button, .listing-page-image-carousel-component li button'));
}
document.addEventListener('keydown', function (e) {
if (e.target.matches('input, textarea')) { return; }
const list = thumbs();
if (!list.length) { return; }
let idx = list.findIndex(function (b) {
return b.getAttribute('aria-current') === 'true'
|| b.classList.contains('is-selected');
});
if (e.key === 'ArrowRight') { (list[idx + 1] || list[0]).click(); }
if (e.key === 'ArrowLeft') {
(list[idx - 1] || list[list.length - 1]).click();
}
});Comment utiliser cet exemple
- Copiez le code avec le bouton ci-dessus.
- Installez JustZix (2 minutes) et ouvrez l'extension sur la page cible.
- Ajoutez une nouvelle règle correspondant à cette page.
- Collez le code dans le panneau JavaScript de la règle et enregistrez — il s'exécute à chaque visite de page.
Notez cet exemple
Aucune note — soyez le premier.