DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Fotos mit dem Finger wischen (Swipe) — auf jeder Karte, überall auf der Seite

Browse Source 
Das Foto-Karussell auf den Produktkarten (Shop-Grid, Startseite, Sale,
Charakter-Kacheln, "Weitere Modelle" — überall wo ProductCard.astro
verwendet wird) lässt sich jetzt zusätzlich zu den ‹/›-Pfeilen auch per
Wisch-Geste bedienen: Finger auf dem Handy oder Maus ziehen am PC.
Technisch über die Pointer-Events-API (deckt Touch UND Maus mit
derselben Logik ab). Ein Wisch zählt erst ab einer Mindeststrecke und
nur bei überwiegend horizontaler Bewegung, damit normales Scrollen der
Seite nicht versehentlich als Wisch missverstanden wird. Da die ganze
Karte ein Link ist, wird der nachfolgende Klick nach einem echten Wisch
unterdrückt — sonst würde man ungewollt zur Produktseite springen, nur
weil man durch die Fotos blättern wollte.

Gleiches Wischen jetzt auch auf der Produktdetailseite selbst, für das
große Hauptbild (springt zum nächsten/vorherigen Thumbnail).

Verifiziert: Wisch ändert das Bild UND verhindert nachweislich die
Navigation; normale Klicks navigieren weiterhin korrekt; die Pfeil-
Buttons funktionieren unverändert (kein Regressionsfehler).

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-03 01:12:46 +02:00
co-authored by Claude Sonnet 5
parent c7c500e23b
commit ba3ab44ef3
2 changed files with 60 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/produkt/[slug].astro
+18 -1
View File
@@ -209,9 +209,26 @@ const felder: [string, string | undefined][] = [
// Klick auf ein Miniaturbild zeigt es groß im Hauptbild an (mehrere Produktfotos).
const heroImg = document.getElementById("product-hero-img") as HTMLImageElement | null;
document.querySelectorAll<HTMLImageElement>(".thumb.product-photo").forEach((thumb) => {
const thumbs = [...document.querySelectorAll<HTMLImageElement>(".thumb.product-photo")];
thumbs.forEach((thumb) => {
thumb.addEventListener("click", () => {
if (heroImg && thumb.dataset.full) heroImg.src = thumb.dataset.full;
});
});
// Auch das große Hauptbild lässt sich wischen (Finger auf dem Handy, Maus ziehen am PC) — springt
// dabei einfach zum nächsten/vorherigen Miniaturbild, exakt wie ein Klick auf den Thumbnail.
if (heroImg && thumbs.length > 1) {
let startX = 0, startY = 0;
heroImg.style.touchAction = "pan-y";
heroImg.addEventListener("pointerdown", (e) => { startX = e.clientX; startY = e.clientY; });
heroImg.addEventListener("pointerup", (e) => {
const dx = e.clientX - startX;
const dy = e.clientY - startY;
if (Math.abs(dx) < 40 || Math.abs(dx) < Math.abs(dy)) return;
const aktuellerIndex = Math.max(0, thumbs.findIndex((th) => th.dataset.full && heroImg.src.endsWith(th.dataset.full)));
const naechster = ((aktuellerIndex + (dx < 0 ? 1 : -1)) % thumbs.length + thumbs.length) % thumbs.length;
heroImg.src = thumbs[naechster].dataset.full!;
});
}
</script>