Fotogalerie: Wischen (Swipen) auf Touchscreen

[Pilo]

In der Fotogalerie auf meiner Website kann man dank eines Java-Sripts die Fotos mit den Pfeiltasten vor- und zurückblättern. Um die Galerie auch auf Smartphones gebrauchen zu können, bin ich nun auf der (bislang vergeblichen) Suche nach einem Script, das dies Blättern auch mittels Wischen (Swipen) möglich macht. Womöglich genügen dafür schon ein paar Zufügungen an mein derzeitiges Script:

<script>
  document.addEventListener("keyup", function(event) {
    if (event.code === 'ArrowUp')
    {  window.location.href='index.php';}
    if (event.code === 'ArrowLeft')
    {  window.location.href='?index=<?php echo $prev ?>';}
    if (event.code == 'ArrowRight')
    {  window.location.href='?index=<?php echo $next ?>';}
});
</script>

Die Fotos stehen in einem Array und werden bei einem neuerlichen Aufruf der Site über ihren Index aufgerufen.
Eine stark vereinfachte Fassung der Fotogalerie kann man sich über diesen Link ansehen:
Fotogalerie

 

[Sempervivum]

Hallo Pilo,
so ganz trivial ist das mit dem Wischen nicht und ich empfehle, es nicht selbst zu machen sondern ein fertiges, bewährtes Skript einzusetzen: Fancybox:
https://fancyapps.com/docs/ui/fancybox/
Oder evtl. auch, wenn die Bilder fensterfüllend sein sollen, Swiper:
https://swiperjs.com

 

[Pilo]

Mit den beiden Vorschlägen läßt sich sicher eine tolle Bildergalerie kreieren. Darum geht es hier aber nicht. Ich habe nämlich bereits eine mit php und css selbst geschriebene Galerie (siehe den Link) , die ganz ohne Links auf fremde Websites auskommt. Mir fehlt nur eine einzige Funktion, die mit PHP nicht zu realisieren ist. Dafür sollte es nicht nötig sein, erst die Feinheiten von Fancybox oder Swiper zu erkunden, was für einen Javascript-Laien sowieso überaus mühsam wäre.

 

[Sempervivum]

eine einzige Funktion

Das schreibt sich so leicht, ist aber ein wenig kompliziert umzusetzen.

Die Frage wird auch hier diskutiert:
https://stackoverflow.com/questions...-through-javascript-on-the-iphone-and-android
Wenn Du dir die oberste Antwort von givanse ansiehst, erkennst Du, dass es nicht so einfach ist.
hammer.js wird auch empfohlen aber auch damit musst Du dich mit einem Skript mit umfangreichen Möglichkeiten vertraut machen.

Bei beiden Alternativen bezweifle ich ob die Anwendung einfacher ist, als Fancybox oder Swiper einzusetzen.

Außerdem ist eine Bildergalerie mit PHP wenig benutzerfreundlich weil bei jedem Wechsel eine neue Seite geladen wird. Und das kannst Du ohnehin nicht beibehalten, wenn Du auf Wischen reagieren willst.

 

[Pilo]

Die "eine einzige Funktion" habe ich dank Google inzwischen gefunden:
https://www.grepper.com/tpc/swiper+js
Auch mit Wischen läßt sich nun die Seite genauso gut neu laden wie mit den Pfeiltasten.
Die Benuzer meiner Website werden das sicher nicht unfreundlich finden.
Die neue Version der Galerie: https://www.rahmelow.info/test

 

[Werner123]

die ganz ohne Links auf fremde Websites auskommt.

Das muss man auch nicht, bei der Fancybox braucht es nur zwei Dateien, die lokal eingebunden werden können, fancybox.css und fancybox.js und schon läuft es, sogar mit Diashow und Beschreibungstext.