Produkt-Slider mit HTML5 und JavaScript für alle sichtbarLesezeit ~ 3 Min.

Beitrag aktualisiert am 11. Juli 2024

Der neue Web-Standard heißt HTML5. Darin ist kein Flash vorgesehen, so dass Effekte wie Bilder-Slider, Produkt-Karusselle, … auch auf Geräte sichtbar werden, die kein Flash unterstützen. Das gleiche Ergebnis hat man aber auch mit Javascript. Wie man das Realisiert, ein paar Beispiele und fertige Module, könnt Ihr heute hier lesen.

Werbung Estugo Logo mit Tel. Nr., weiss

Eine erste Auswahl von HTML5 und JavaScript Modulen für Online-Shops und Websites

Den eigenen Online-Shop mit Slider, Produkt-Karusselle oder anderen „Spielerein“ zur Verkaufsförderung zu verschönern, geht am einfachsten mit Flash-Modulen. Jedoch können diese nicht auf Geräte dargestellt werden, die kein Flash unterstützen. Das beste Beispiel ist das iPad. Apple wird auch in Zukunft kein Flash einbinden. Offiziell heißt es, dass so verhindert wird, dass es Flash-Apps von freien Programmieren gibt. Aber auch für Android soll es kein Flash mehr geben. Im Gegensatz kaufen Sechs Millionen deutsche per Smartphone oder Tablet PC ein. Eine nicht unbedeutente Zielgruppe sieht den Produkt-Slider also nicht und kann natürlich auch nicht die damit verknüpften Artikel aufrufen.
Neben Flash gibt es jedoch auch andere Möglichkeiten. Eine wäre JavaScript, eine andere der neue Standard HTML5. Im folgenden habe ich ein paar Links zu freien, kostenlosen Modulen. Für alle die mit dem Einbau Probleme haben, biete ich einen Einbau-Service¹ an. (Hinweis: die Module stammen nicht von mir. Hinweise sind in Readme-Dateien, oder Lizenz-Dateien hinterlegt)

Die Übersicht der HTML5 und JavaScript-Module

  • http://html5demos.com – Interessante Demos und Anleitungen zu HTML5
  • http://www.photoswipe.com – PhotoSwipe ist ein kostenloser HTML / CSS / JavaScript basierte Bildergalerie speziell für mobile Geräte.
  • http://caroufredsel.frebsite.nl – jQuery.carouFredSel ist ein Plugin, dass sich wie ein Karussell, bzw. Slider bewegt. Es können ein oder mehrere Elemente gleichzeitig horizontal oder vertikal, unendlich oder automatisch bewegt werden. (GPL-Lizenzen) (Beispiel)
  • http://tutorialzine.com – jQuery Animationen mit HTML5. Eine Bilder Gallery mit Fade-Übergang. (Demo)
  • http://imageflow.finnrudolph.de – Bilder-Karussell, kostenlos für Privat, 20,- EUR für kommerzieller Nutzung.
  • http://www.jacksasylum.eu – Ein Karusell, das mit verschiedenen Inhalten wie Bilder, Texte, usw. umgehen kann. Geschrieben in JavaScript, freie Lizenz.
  • http://www.professorcloud.com – Karussell für Bilder und Text, in JavaScript.
  • http://xilinus.com – Ein Menü-Script, mit dem man ein ähnliches Ergebnis erreicht, wie auf der Mac-Webseite.
  • http://multimedia2010.studio-m.mi.fh-offenburg.de – Anleitungen und Beispiele.
  • http://jquerytools.org – Ein Slider mit JQuery
  • http://css-tricks.com/examples/AnythingSlider/#panel2-3 – Ein weiterer Slider ohne Flash
  • http://builtbywill.com/code/booklet – Ein Buch blättern mit jQuery
Weitere Möglichkeiten von HTML5 werden hier vorgestellt (in eng). Ob dein Browser HTML5 vollständig unterstützt, kannst du bei html5test.com testen.

Mein Fazit

Es erscheint manchmal der Eindruck, dass Adobe um unser Wohl besorgt ist. Langeweile soll bei Shop-Betreibern nicht aufkommen. Es gibt immer was zu tun 😉 . Aber auch ohne Flash ist das Ergebnis sehr gut. Das bloßen Auge wird den Unterschied kaum erkennen, nur Tablet-Nutzer wissen es gleich (wenn sie technisch versiert sind).

Weitere Beiträge

Anonyme Umfrage: Gendersensible Sprache

3 Gedanken zu „Produkt-Slider mit HTML5 und JavaScript für alle sichtbar“

  1. Vielen Dank für die tolle Vorschläge

    Wer ganz kreativ Animationen hestellen und in Webseiten integrieren möchte,sollte unbedingt http://www.loxiastudio.com/en besuchen

    Es gibt dort 37 verschiedene Slider/Animationen zur Auswahl, sowie Tutorials, die Sie zu diversen Arten von Webseiten, zun Beispiel WordPress/Blogger usw. führen

    Ich hoffe, dass dieser Post nützlich ist.

    Antworten

  2. Hallo,

    toller guter Artikel. Die con sector12 haben jetzt auch die ersten HTML5 Produkte im Angebot. Habe dort einige Flsh Sachen gekauft und war zufrieden. Auch eine HTML5 Umsetzung habe ich bereits. Hoffe es ist o.k. das ich die Seite verlinke: http://www.flash-kostenlos.de/

    P.S. der Support hilft bei Fragen gerne weiter….

    Antworten

Schreibe einen Kommentar