Artikelbilder

[Alex]

Hab auf meiner Seite 6 Bilder pro Artikel. Diese werden in zwei Spalten a drei Bilder angezeigt. Auf dem Desktop sieht dieses sehr gut aus. Tablet kann man es auch noch lassen aber auf dem Handy bekomme ich ein Problem. Nun dachte ich an folgendes:

Sobald ich in den Handy Bereich kommen soll ein Bild zu sehen sein die anderen darüber liegen und durch wischen von links nach rechts bzw. rechts nach links wechseln.

Leider habe ich keine Ahnung wie man so ein wisch Effekt macht. Habt Ihr dieses bereits umgesetzt? Ist dieses schwer?

[Gunnar Bittersmann]

@@Alex:

nuqneH

Leider habe ich keine Ahnung wie man so ein wisch Effekt macht. Habt Ihr dieses bereits umgesetzt? Ist dieses schwer?

Ich würde was Fertiges nehmen. Swipe funktioniert gut – und braucht kein jQuery.

Du musst dafür sorgen, dass Swipe nur bei schmalen Viewports angewand wird:

Das Container-Element (ID "artikelbilderContainer") bekommt die Klasse "swipe" nicht im HTML, sondern per JavaScript:

if (document.documentElement.offsetWidth < 666)  
{  
  var artikelbilderContainerElement = document.getElementById('artikelbilderContainer');  
  artikelbilderContainerElement.className += ' swipe';  
  window.artikelbilderSwipe = Swipe(artikelbilderContainerElement, { … });  
}

Verbesserungen:
Die Bibliothek swipe.js muss nur bei Bedarf geladen werden, also dynamisch innerhalb dieses if.

Das Ganze dynamisch auf Änderungen der Größe des Browserfensters reagieren lassen.

Qapla'