Vorstellung und Tutorial: jpCarousel

Die Extension jpCarousel lässt schöne und flexible Slideshows erstellen. Es gibt viele Einstellungsmöglichkeiten wie beispielsweise die Rotationsgeschwindigkeit, das Aussehen der Buttons, die Größe des Sliders, das Aussehen der Box und vieles mehr. Natürlich kann über CSS alles umgebaut werden. Aber selbst die Benutzerpberfläche im Backend lässt uns einiges konfortabel konfigurieren. Wie das geht wird hier erklärt.

jpCarousel Typo3 Extension Slideshow

jpCarousel Slideshow von Bildern

(Quelle: http://typo3.org/documentation/document-library/extension-manuals/jpcarousel/1.1.1/view/1/2/#id2314133)

Schritt für Schritt Anweisung jpCarousel
1. jpCarousel (ext key: jpcarousel) aus dem Repository herunterladen und installieren

2. Template einbinden über Template -> Enthält -> statische Templates einschließend (aus Erweiterung)

3. Content Element anlegen vom Typ “jpcarousel”

4. Im Content Element im Reiter Plugin -> Datensätze -> Art der Datensätze eine Option auswählen und die entsprechenden Datensätze im Feld darunter referenzieren

Mit dieser Standardkonfiguration funktioniert unsere Extension schon. Doch wir können noch viel ändern! Im Reiter “Art der Datensätze” von jpcarousel können wir zwischen 3 verschiedenen Arten wählen. Diese sind

  • Bilder -> lässt einzelne Bilder rotieren
  • Content Element mit Listenelement -> tt_new Einträge
  • Content Element -> ganz normales Content Element wie es auf jeder Seite angelegt wird

Am besten erstellt man sich einen Sysordner, in welchen man die Content Elemente ablegt, welche dann rotiert werden sollen.

jpCarousel CSS anpassen

Um das CSS des jpCarousel anzupassen, gibt es drei Möglichkeiten.

  1. die Optionen der Konfiguration nutzen. Hier können wir die Hintergrundfarbe der Sliderbox und diverse andere konfigurieren. Wem das reicht, kann das hier konfortabel tun.
  2. Stylehseet-Datei ändern. Bei einem Update werden die Änderungen aber wieder überschrieben.
  3. Stylesheetdatei kopieren, an einen separaten Platz verschieben und in der jpCarousel-Konfiguration angeben. Dieses Stylesheet kann dann abgeändert und umgebaut werden, ohne dass ein Update alles auf Null zurücksetzt.

jpCarousel Einstellungen

jpCarousel lässt uns viele Einstellungen direkt im Backend von Typo3 konfigurieren. So können wir unter anderem die Animationsgeschwindigkeit, die Sliding-Methode, die Anzahl gleichzeitig angezeigter Elemente und vieles mehr definieren.

Doch im Constant Editor des Templates finden sich noch weitere Einstellungen. In der offiziellen Dokumentation gibt es eine Tabelle, welche die zu setzenden Werte genauer erklärt. Aber Achtung: Alle in der Flexform gesetzten Werte überschreiben die Werte des Constant Editors.

 

 

Ähnliche Artikel

  • Keine Ähnlichen Artikel vorhanden.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>