JSSOR Carousel Slider Modul in Version 1.0.4

Der vorhandene Code wurde komplett auf das neue Sliderscript umgestellt. Für die Bullet und Arrow Navigation werden keine Bilder mehr verwendet! Für Sie bedeutet das, Sie können die die Bullet Navigation individuell in Größe, Ansicht und Farben selbst über das Backend frei gestalten. Für die Arrow Navigation gibt es eine große Auswahl an Pfeile zur Auswahl. Auch hier kann die Größe individuell verändert werden.

Übersicht:

Installation

Installieren Sie das Modul Paket wie gewohnt über den Erweiterungsmanager im Joomla Backend.

  1. Klicken Sie auf "oder eine Datei auswählen"
  2. Wählen Sie die entsprechende Datei auf Ihrem Rechner
  3. Wenn diese in der Dateizeile erscheint, ist sie ausgewählt
  4. Klicken Sie auf "Öffnen"

1 small

Sie erhalten nun diese Nachricht, dass das Modul erfolgreich installiert wurde.

Danach gehen Sie auf den Menü-Punkt Erweiterungen => Module - zum Modulmanager!

2 small

Der Modulmanager zeigt uns das Modul in der Liste! Klicken Sie jetzt auf den Modulnamen um zu Konfiguration zu gelangen.

3 small

 

 

Konfiguration

Jetzt beginnt der etwas komplexere Bereich für das Jsson Banner Slider Modul.

4 small

Die erste Ansicht im Tab Modul zeigt die Grund-Einstellungen für die Slideshow, die ich im folgendem erklären werde.

Titel anzeigen -> sollte abgeschaltet werden. Hängt ganz von der Konfiguration der Modulposition ab!

Position -> wählen Sie die Modulposition, wo die Slideshow erscheinen soll.

Status -> setzen Sie das Modul auf "Veröffentlicht"

Alle weiteren Einstellungen dürften bekannt sein und werde ich hier nicht weiter beschreiben.

 

Modulzuweisung

5 small

 

Veröffentlichen Sie das Modul, entsprechend den möglichen Joomla Moduleinstellungen, unter den entsprechenden Seiten, wo Sie die Slideshow haben möchten. 

 

Bilder für die Slideshow

Die Bilder für die Slideshow sind das wichtigste. 

Aber erst einmal zum Bild Format. Es werden Bilder mit den Dateiendungen "jpgpng und jpeg" akzeptiert! Sie sollten sich zudem im klaren sein, welche Größe die Slideshow später haben soll. Erstellen Sie bitte alle Bilder so, in Breite und Höhe, wie sie im Endeffekt dargestellt werden sollen.

Beispiel: Breite der Slideshow soll 850px und die Höhen 250px auf Desktop Geräten betragen, dann sollten Sie die Bilder in diesem Format erstellen!

Die Sortierung der Bilder übernimmt das Modul automatisch vor. Alle Bilder werden alphanumerisch sortiert! Benennen Sie also Ihre Bilder entsprechend schon in der Reihenfolge, wie sie ablaufen sollen.

Beispiel:

  • erstes Bild: a.jpg oder 1.jpg
  • zweites Bild: b.jpg oder 2.jpg

Beachten Sie bitte weiterhin, dass das Modul, im Standard, auf 4 Bilder/Slide beschränkt ist! Werden mehr Bilder benötigt pro Slidesite, können Sie mit Hilfe der Breiten- und Höheneinstellung der Bilder, entsprechend anpassen.

in dieser Version ist Uploadfunktion eingebaut. Dazu haben Sie noch zwei Optionen, je nach Server-Konfiguration.

  1. Sie laden die Bilder über den Medien-Manager hoch
  2. Sie laden die Bilder per FTP hoch

Über den Medien-Manager im Menü-Punkt "Inhalte => Medien" suchen Sie im Root des Joomla Bildverzeichnisses "images" das neues Verzeichnis "/carousel_slider" und laden Sie hier Ihre Slideshowbilder hoch.

14 small

Via FTP Client, melden Sie sich auf Ihrem Host an und suchen Sie hier das neues Verzeichnis im Joomla Bildverzeichnis "/images",mit dem Namen "/carousel_slider". Anschließend übertragen sie die Bilder in dieses Verzeichnis.

15 small

Sind die Bilder dann im Verzeichnis gespeichert, können Sie in den Moduleinstellungen, den korrekten Pfad eingeben! Standardmäßig ist hier bereits das Verzeichnis "/images/carousel_slider" vorgegeben!

Sie können bequem auch die Bilder über den eingebauten Media Upload hochladen. In der Grundinstallation sind 20 Beispielbilder bereits inklusive, um bereits die Funktionstüchtigkeit der Slideshow zu demonstrieren. Löschen Sie ganz einfach die Bilder im Mediamanager, wenn Sie dann eigene Bilder benutzen möchten.

Beachten Sie bitte, wenn Sie den Pfad verändern, müssen Sie diese Einstellung auch im Media-Upload entsprechend berücksichtigen. Auch dieser ist nach dem Standardpfad zum Verzeichnis "/images/carousel_slider" eingestellt! 

Bei der Benutzung des Slideshow Modules auf verschiedenen Unterseiten, mit unterschiedlichen Bildern, müssen Sie für jede Slideshow ein gesonderten Ordner unter "/images" einrichten und entsprechend im Backend angeben.

Beispiel:

  • Slideshow Modul Startseite -> /images/carousel_slider
  • Slideshow Modul Unterseite -> /images/carousel_slider1 
  • etc.

 

Kommen wir zu den anderen Grundeinstellungen der Slideshow:

grundeinstellungen carousel small 

  • Slideshow Breite: Diese Breite bezieht sich auf die Desktop-Ansicht! Die Eingabe erfolgt in Pixel Größen, jedoch ohne dem Kürzel px!
  • Slideshow Höhe: Die Höhe bezieht sich auf die Desktop-Ansicht! Die Eingabe erfolgt in Pixel Größen, jedoch ohne dem Kürzel px!
  • Bildanzahl pro Slide: Sie können jetzt je nach Breite der Slideshow die Anzahl der zu zeigneden Bilder in einem Slide frei einstellen.
  • Bildbreite: Die Breite bezieht sich auf die einzelnen Bilder in einem Slide. Die Eingabe erfolgt in Pixel Größen, jedoch ohne dem Kürzel px! Beachten Sie dabei, dass bei der Auswahl einer anderen Anzahl von Bildern pro Slide, auch die Bildbreite angepasst werden muss. Dies gilt auch für die Höhe der Slideshow.

 

Übergänge der Slideshow

Als nächster Punkt folgt erst ein mal die Einstellung der Bildübergänge der Slideshow. Sie haben hier 378 Optionen frei zur Auswahl. Die wichtigste Option ist "Fade". Jetzt werden die Übergänge von Anfang bis zum Ende durchlaufen und beginnen dann wieder von vorn. Wer es bewegter mag und vor allem in nur einer Übergangsart nutzen möchte hat dazu ja noch 377 Möglichkeiten!

Die weiteren Einstellungen sind:

Slider Autoplay -> Hier können Sie festlegen, ob der Slider beim Seitenaufruf automatisch starten soll! Ein ist empfohlen!

Autoplay Interval -> Geben Sie eine Zeit in Millisekunden ein, zur Verweildauer der Bilder zwischen den einzelnen Bildwechseln

Pause bei Mouseover -> Wählen Sie hier aus, was beim überfahren der Slideshow mit der Maus, für eine Aktion erfolgen soll.

Navigationsübergangszeit -> Geben Sie eine Zeit in Millisekunden an, um die Länge der Übergangszeit beim Wechssel der Bilder festzulegen. Standard ist empfohlen!

 

Bullet Navigation (Neu seit 1.0.4)

slideshowbilder1a small

Punkt Navigation -> Geben Sie an, wann die sogenannte Bullet Navigation erscheinen soll!

Ausrichtung der Punkt Navigation -> Legen Sie hier fest, ob die Navigationsleiste rechts unten im Bild, rechts unterm Bild, zentriert im Bild oder zentriert unter dem Bild angezeigt werden soll.

Design der Punkt Navigation -> Legen Sie hier das Design fest. Es stehen derzeit 4 Einstellungen zur Verfügung. (rund, quadrat mit abgerundeten Ecken, quadrat und rund mit Zahlen)

Hintergrundfarbe normal -> Hier können Sie die Hintergrundfarbe im Normalzustand des Punktes einstellen.

Transparenz der Hintergrundfarbe normal -> Legen Sie die Stärke der Transparenz für den Punkt Hintergrund fest.

Rahmenfarbe normal -> Hier können Sie die Farbe für den Außenrahmen des Punktes individuell ändern.

Transparenz der Rahmenfarbe normal -> Legen Sie hier die Stärke der Transparenz der Rahmenfarbe fest.

Mouseover Hintergrundfarbe -> Hier können Sie die Hintergrundfarbe des Punktes festlegen, wenn mit der Maus darüber gefahren wird.

Transparenz der Mouseover Hintergrundfarbe -> Legen Sie die Stärke der Transparenz für den Punkt Hintergrund bei mouseover fest.

Rahmenfarbe Mouseover -> Hier können Sie die Farbe für den Außenrahmen des Punktes individuell ändern.

Transparenz der Rahmenfarbe Mouseover -> Legen Sie hier die Stärke der Transparenz der Rahmenfarbe fest.

 

slideshowbilder2 small

 

Hintergrundfarbe aktiv -> Hier können Sie die Hintergrundfarbe im Aktivzustand des Punktes einstellen

Transparenz der Hintergrundfarbe aktiv -> Legen Sie die Stärke der Transparenz für den Punkt Hintergrund fest.

Rahmenfarbe aktiv -> Hier können Sie die Farbe für den Außenrahmen des Punktes individuell ändern.

Transparenz der Rahmenfarbe aktiv -> Legen Sie hier die Stärke der Transparenz der Rahmenfarbe fest.

Größer der Punkt Navigation -> Wählen Sie eine Größe für den Punkt aus der Liste.

Schriftgröße im Punkt -> Passen Sie hier die Schriftgröße für die Zahlen im Punkt an, wenn Sie die Größe des Punktes ändern. Nur aktiv bei der Designausewahl "rund mit Zahlen".

Schriftfarbe normal -> Legen Sie die Schriftfarbe für den Normalzusatnd des Punktes fest. Diese gilt auch für Mouseover!

Schriftfarbe aktiv -> Legen Sie die Schriftfarbe für den aktiven Zustand des Punktes fest.

 

Die Arrow (Pfeil) Navigation (Neu seit 1.0.4)

Pfeil Navigation -> Geben Sie an wann die sogenannte Key Navigation erscheinen soll!

Design Icon Navigation -> Wählen Sie eines der Designs für die Pfeilnavigation aus.

Größe des Navigations Icons - > Wählen sie die Größe des Icons für die Navigation aus.

 

 

Verlinkungen der Bilder

Die Bilder können nicht verlinkt werden!

 

Beschreibungstexte für die einzelnen Bilder

Beschreibungstexte sind für diese Art der Slideshow nicht vorgesehen!

 

Erweiterte Einstellungen

7 small

 

Legen Sie hier entsprechend den Joomla Grundsätzen Ihre persönlichen Einstellungen fest.

 

slideshow carousel small

 

Änderungen:

Version:

1.0.3 -> 1.0.4

  • Komplette Überarbeitung des Scriptes und Codes
  • Bullet-Navigation komplett erneuert von Bild auf SVG zur freien Gestaltung der derzeit 4 Formen, in Farbe, Transpenz und Schriftfarben.
  • Arrow Navigation komplett erneuert von Bild auf SVG mit großer Auswahl an Pfeilarten. Größe einstellbar.
  • Anzahl der Bilder pro Slide kann ab jetzt geändert werden. Keine feste Begrenzung auf 4 Bilder pro Slide mehr.

 

Download des Moduls

Alle Einzelheiten zum Download des Modules, finden Sie hier