JSSOR Slider Modul Pro in Version 3.1.5

Ü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.

2 small

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

3 small

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

4 small

 

 

Konfiguration

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

5 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

6 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 15 Bilder, der Übersicht halber, beschränkt ist! Werden mehr Bilder benötigt, können Sie sich gern an mich, per E-Mail melden.

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 "/slideshow" 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 "/slideshow". 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/slideshow" vorgegeben!

Sie können bequem auch die Bilder über den eingebauten Media Upload hochladen. In der Grundinstallation sind 5 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/slideshow" 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/slideshow
  • Slideshow Modul Unterseite -> /images/slideshow1 
  • etc.

 

Kommen wir zu den anderen Grundeinstellungen der Slideshow:

7 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!

 

Ü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 "Random". Jetzt werden ausgesuchte Übergänge von

Anfang bis zum Ende durchlaufen und beginnen dann wieder von vorn. Wer es ruhiger 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!

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

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

Nav-Pfeile Abstand: Hier können Sie festlegen, entsprechend der Höhe der Slideshow, wie weit von oben die Navigationspfeile erscheinen sollen. Auch hier erfolgt die Eingabe in Pixel Größen jedoch ohne dem Kürzel px!

 

Verlinkungen der Bilder

Sie haben die Absicht, die Bilder mit Links zu versehen, die zu einer ganz bestimmten Seite führen? Kein Problem! Im weiteren Verlauf der Einstellungen, können Sie für die zehn möglichen Bilder jeweils einen konkreten Link eintragen.

8 small

Benutzen Sie dazu die entsprechenden Eingabefelder, um die URL einzutragen. Im Standard ist keine Verlinkung aktiviert! Sie müssen für jedes Bild ein Feld ausfüllen, wenn Sie das Bild auch verlinkt haben möchten. Sie können die Bilder damit zu unterschiedlichen Unterseiten Ihrer Homepage verlinken.

 

Teaser Einstellungen

9 small

 

Teaser Ein- und Ausblendung -> Hier stehen Ihnen 432 Übergänge für die Einblendung und auch für die Ausblendung zur Verfügung! Dies bedeutet, Sie können für einen Teaser jeweils

zwei Übergänge separat auswählen, oder die Auswahl gleich lassen. Ganz wie es Ihnen beliebt!

Teaser Verzögerung - > Hiermit können Sie eine Verzögerung in Millisekunden angeben, ab wann der Teaser eingeblendet wird. Es sind Plus- und Minuswerte möglich.

Play In Übergangszeit -> Hier bestimmen Sie die Länge der Einblenzeit des Teasers in Millisekunden.

Play out Übergangszeit -> Hier bestimmen Sie die Ausblendzeit des Teasers in Millisekunden.

Wird die 0 eingetragen, wird der eingetragene Standardwert des Überblendeffektes genutzt. Testen Sie selbst aus, in welcher Geschwindigkeit die Teaser ein- bzw. ausgeblendet werden sollen.

Diese Einstellungen sind für beide Teaserboxen, im Standard links oben und rechts unten, vorhanden und einzustellen!

 

Teaser Hintergrund -> Hier können Sie dann den Hintergrund für den Theaser Text auswählen. Diese Optionen ermöglich den Zugriff auf eine Farbauswahl, ganz ohne starr festgelegte Farb-Muster!

Hintergrund Transparenz -> In diesem Auswahlfeld können Sie die Transparenz der Teaserbox festlegen. Wird volle Transparenz eingestellt verschwindet auch der Rahmen und Schatten der Box!

Schriftfarbe Teaser -> Legen Sie hier die Schriftfarbe für den Teasertext fest.

Linkfarbe Teaser -> Legen Sie hier die Schriftfarbe für Links innerhalb des Teasers fest.

Linkfarbe Teaser Hover -> Legen Sie hier fest, welche Farbei beim Übergang mit der Maus (hover Effekt) für den Link erscheinen soll.

Schriftgröße Teaser -> Wählen Sie eine Schriftgröße, die Ihnen zusagt!

10 small

Line-height Teaser -> Wählen Sie die Zeilenhöhe immer größer als die Schriftgröße.

Linker Abstand -> Die absolute Position der Teaserbox 1 von links. Bitte beachten Sie das die Angaben ohne px gemacht werden!

Oberer Abstand -> Die absolute Position der Teaserbox 1 von oben. Bitte beachten Sie das die Angaben ohne px gemacht werden!

Wiederholen Sie die individuellen Einstellungen dann auch für die zweite Teaserbox, gleich im Anschluss darunter.

 

Beschreibungstexte für die einzelnen Bilder

In dem Slideshow Modul, befindet sich unter dem Tab "Teaser Texte", die Eingabemöglichkeit von einem oder zwei Teasern mit einem Editor. In der Grundausführung sind keine Beschreibungstexte als Demo vorhanden. Sie können auch die Teaser versetzt anzeigen lassen. Lassen Sie dazu jeweils immer das entsprechende Feld in Box 1 oder 2 frei. Auch hier ist die Anzahl auf jeweils 15 Teasertexte pro Seite (links und/oder rechts) beschränkt. Sollten Sie mehr benötigen, wenden Sie sich vertrauensvoll per E-Mail an mich. 

Zur Beachtung! Die vorgegebene 0 ist technisch bedingt! Sie wird automatisch gespeichert, wenn Sie den Teasertext komplett löschen! 

11 small

 Für alle 15 Bilder können sie entweder zwei oder die linke bzw. rechte Teaserbox für Text (mit und ohne Verlinkung) oder für Miniaturbilder nutzen.

12 small

 

Erweiterte Einstellungen

13 small

 

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

 

Änderungen

 3.1.4 -> 3.1.5

  • Pfeilnavigation geändert
    • SVG für Bild
    • automatische Einstellung für die Zentrierung -> damit entfällt der Punkt "Nav-Pfeile Abstand" in der Grundeinstellung der Slideshow
 

Download des Moduls

Alle Einzelheiten zum Download des Modules, finden Sie hier