3.5.5. Views Slideshow – Anzeige von jQuery-Diashows und Karussells über Views.

In Drupal 7 gab es viele Module zur Integration verschiedener jQuery-Diashows mit Drupal. Wahrscheinlich war Views Slideshow das beliebteste und bequemste. Ein Nachteil der Version 7 des Views Slideshow-Moduls war, dass es nicht responsiv war. In der Version 8 wurde dies behoben, also erstellen wir jetzt die Diashow genau mit Views Slideshow.

Zuerst müssen Sie das Views Slideshow-Modul herunterladen und installieren, außerdem müssen Sie das Untermodul Views Slideshow Cycle aktivieren:

https://www.drupal.org/project/views_slideshow

Wir benötigen auch zusätzliche jQuery-Bibliotheken. Diese müssen in den Ordner libraries eingefügt werden. Falls der Ordner libraries im Root-Verzeichnis der Seite nicht existiert, erstellen Sie ihn bitte.

/libraries/jquery.hoverIntent/jquery.hoverIntent.js

https://github.com/briancherne/jquery-hoverIntent

/libraries/jquery.cycle/jquery.cycle.all.js

http://malsup.github.io/jquery.cycle.all.js

/libraries/json2/json2.js

https://raw.githubusercontent.com/douglascrockford/JSON-js/master/json2.js

Nachdem wir diese Bibliotheken hinzugefügt haben, können wir eine Ansicht mit Ausgabe über Views Slideshow hinzufügen. Um zu beginnen, erstellen Sie einen Inhaltstyp oder verwenden einen vorhandenen mit einem Bildfeld. Zum Beispiel habe ich diesen Inhaltstyp Galerie mit dem Feld Foto.

Jetzt erstellen Sie eine View und wählen im Anzeigeformat Views Slideshow (Slideshow):

Wir erhalten nun eine Diashow mit vielen Einstellungen. Klicken Sie in der Spalte Format auf Einstellungen, um die Funktionen des Views Slideshow-Moduls zu analysieren.

Zeilenklasse: Die Standard-Einstellung für die Zeilenansicht ist hier views-row, was eine Folie ist; Sie können hier eine Klasse für die Folie festlegen.

Style.
Skin. Hier können Sie Designoptionen für Views Slideshow hinzufügen und auswählen. Anfangs ist nur die Standardoption verfügbar, aber ich denke, Sie können zusätzliche Module für das Design von Views Slideshow hinzufügen.

https://www.drupal.org/node/909020

Slides.
Typ der Diashow. Auswahl eines jQuery-Plugins, über das Views Slideshow arbeitet, zum Beispiel FlexSlider Views Slideshow:

https://www.drupal.org/project/flexslider_views_slideshow

Slideshow-Typ.
Hier finden sich die Einstellungen für den Folienwechsel.

Effekt. Das Umschalten der Folien kann mit verschiedenen Effekten erfolgen. Achten Sie auf scrollHorz – wenn Sie diesen Effekt wählen, sieht die Diashow wie ein jQuery-Karussell aus.

Erweiterte Optionen für den Übergang der Ansicht.

Timer-Verzögerung. Zeit zwischen den Folienwechseln.

Geschwindigkeit. Direkte Zeit für den Folienwechsel.

Startverzögerung der ersten Folie. Zeit bis zum ersten Wechsel. Vielleicht notwendig, falls die Seite lange lädt, damit der Benutzer die erste Folie sehen kann, bevor der Wechsel erfolgt.

Zufällig. Sie können die Folien in zufälliger Reihenfolge anzeigen lassen.

Aktion

Hier können Sie die Pause in der Diashow einstellen sowie die Höhe der Diashow anpassen.

Pause bei Klick. Pause, wenn auf die Folie geklickt wird.

Pause bei Mausklick. Stoppt die Diashow bei Klick.

Erweiterte Optionen für die Aktion der Ansicht

Diashow pausiert starten. Die Diashow startet erst, wenn die Pause durch Hovern oder Klicken aufgehoben wird.

Start auf zuletzt angesehener Folie. Merkt sich den Zustand der Diashow, sodass der Benutzer beim nächsten Besuch wieder die aktuelle Folie sieht.

Pause, wenn die Diashow nicht sichtbar ist. Stoppt die Diashow, wenn der Benutzer sie nicht sieht. Praktisch für Landingpages, wenn sich die Diashow irgendwo in der Mitte der Seite befindet.

Diashow nach letzter Folie beenden. Die Diashow läuft bis zum Ende und stoppt dann.

Fensterhöhe an die größte Folie anpassen. Eine interessante Einstellung, da die Folien nicht immer die gleiche Höhe haben. Wenn die Höhe der Diashow von der Höhe der Folie abhängt, kann es beim Folienwechsel zum Verschwimmen des Inhalts kommen, was störend sein kann. Andererseits kann ein großer Abstand zwischen Diashow und Inhalt schlecht aussehen, wenn die größte Folie viel höher ist als die anderen. Versuchen Sie also, die Folien ungefähr auf die gleiche Höhe zu bringen.

Elemente pro Folie. Sie können Views Slideshow wie ein jQuery-Karussell aussehen lassen, wenn Sie hier statt 1 mehrere Folien gleichzeitig anzeigen. Zusammen mit dem scrollHorz-Effekt (siehe oben) sieht das dann auch wie ein Karussell aus.

Warten, bis alle Folienbilder geladen sind. Die Diashow wechselt erst, wenn alle Bilder geladen sind. Bei sehr großen Bildern sollten Sie diese Option eventuell deaktivieren.

Internet Explorer Anpassungen

Diese Einstellungen können Sie weglassen, wenn keine Texte oder Hintergrundfarben in der Diashow sind. Außerdem wirken diese Einstellungen nur im Internet Explorer.

Erweiterte Einstellungen des jQuery Cycle Plugins werde ich in einer separaten Lektion behandeln.

Widgets Sie können Schaltflächen für den Folienwechsel sowohl oben als auch unten anzeigen.

Steuerungen. Sie können Textlinks „Weiter“ / „Zurück“ aktivieren. Mit zusätzlichem CSS können Sie diese Textlinks optisch ansprechend gestalten. Die Gestaltung von Views Slideshow behandeln wir in der Lektion zur Erstellung eines Themes basierend auf Bootstrap.

Folienzähler. Zeigt an, wie viele Folien insgesamt vorhanden sind und welche gerade angezeigt wird.

Paginator. Über diese Einstellung können Sie Umschaltpunkte für die Diashow erstellen. Fügen Sie dazu das Feld Views Ergebniszähler zur Ausgabe hinzu und wählen dieses Feld im Seiten-Navigator aus. Wie man Punktumschalter erstellt, sehen wir ebenfalls in der Lektion zum Bootstrap-Theming für Drupal 8 und höher.

Bis dahin können Sie versuchen, eine Diashow mit Views Slideshow zu erstellen. Wenn es nicht klappt, können Sie gerne einen Kommentar schreiben.