Hintergrundbilder im Slider

In diesem Artikel möchte ich zeigen, wie man (Hintergrund)Bilder in einem Slider verwenden kann. Es gibt zwar einige Bilder-Slider, bei diesen kann man aber meistens nur Bilder durchblättern. Oft ist aber gewünscht, dass über dem Bild noch eine Überschrift Links oder sonstiger Text steht, also Inhalte, für die man die Standard Inhaltselemente von TYPO3 nutzen kann. Gut dafür geeignet ist die oft genutzte Erweiterung jfmulticontent oder aber die Umsetzung mit Ext. gridelements. Bei beiden Varianten können alle TYPO3 Inhaltselemente (Text, Bild, Text mit Bild, Formulare, Plugins, …) im Slider verwendet werden. Und mit meiner Erweiterung backgroundimage4ce kann man für alle Inhaltselemente Hintergrundbilder angeben. Screenshots, wie die Bedienung im TYPO3 Backend erfolgt, die Ausgabe im Frontend, eine Anleitung zur Installation und vieles mehr findet man im Handbuch von Ext. backgroundimage4ce.

Anstatt der „langweiligen“, klassischen Darstellung und Bedienung des Sliders gibt es hierbei viele weitere Möglichkeiten: Man kann zum Beispiel die Hintergrundbilder „supersized“, also verbreitert auf die gesamte Bildschirmbreite und/oder -höhe, darstellen und hinter dem gesamten Seiteninhalt durchscrollen. Oder man verwendet andere Effekte: Anstatt die Inhalte klassisch von rechts nach links durchzusliden, kann man diese zum Beispiel auch überblenden.

Auf diesen Seiten sieht man eine Demonstration des Sliders:

  1. Kombination von backgroundimage4ce mit gridelements: www.datacollect.com
  2. Kombination von backgroundimage4ce mit jfmulticontent: www.spezialitaetenland-bayern.de

Setzt du bei einer Webseite auch diese Kombination für einen Slider ein? Falls ja, nehme ich diese gerne in die Liste auf. Oder kennst du eine andere Möglichkeit für einen Slider in TYPO3, bei dem Text über einem Bild durchgeblättert werden kann?

Autor:
Geändert: Mittwoch, 2. Juli 2014 17:42 Uhr
Erstellt: Donnerstag, 26. Juni 2014 10:58 Uhr
Tags: , , , , ,
Themengebiet: Web Entwicklung, TYPO3, TYPO3 Extensions

Trackback: Trackback-URL LoadingZu Favoriten hinzufügen

Kommentar abgeben