3.5.5. Views Slideshow – jQuery-diaweergaven en carrousels weergeven via Views.

In Drupal 7 waren er veel modules om verschillende jQuery-slideshows met Drupal te integreren. Waarschijnlijk was Views Slideshow de populairste en handigste module. Er was echter één nadeel in de versie voor Drupal 7: de module was niet responsief. In Drupal 8 is dit probleem opgelost, dus laten we een slideshow maken met Views Slideshow.

Allereerst moet je de module Views Slideshow downloaden en installeren, en ook de submodule Views Slideshow Cycle inschakelen:

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

Daarnaast hebben we extra jQuery-bibliotheken nodig. Deze moeten worden geplaatst in de map libraries. Als deze map nog niet bestaat in de hoofdmap van je site, maak die dan aan.

/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

Nu we deze bibliotheken hebben toegevoegd, kunnen we een View aanmaken die weergave via Views Slideshow gebruikt. Maak eerst een inhoudstype aan (of gebruik een bestaand inhoudstype) met een afbeeldingsveld. In dit voorbeeld gebruik ik het inhoudstype Galerij met het veld Foto.

Maak nu een nieuwe View aan en stel bij Weergaveformaat in op Views Slideshow (Slideshow):

We krijgen nu een slideshow met uitgebreide instellingen. Klik op Settings in de kolom Format en laten we de mogelijkheden van de Views Slideshow-module analyseren.

Row class. Standaard heeft elke rij in Views de klasse views-row — in dit geval is dat een slide. Hier kun je een aangepaste CSS-klasse voor de slide instellen.

Stijl.
Skin — hier kun je ontwerpen kiezen voor je slideshow. In het begin is alleen het standaardontwerp beschikbaar, maar je kunt extra modules installeren met extra skins voor Views Slideshow.

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

Slides.
Type slideshow — hier kies je de jQuery-plugin die Views Slideshow gebruikt, bijvoorbeeld FlexSlider Views Slideshow:

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

Slideshow Type.
Hier kun je instellen hoe de slides worden gewisseld.

Effect. De overgang tussen slides kan met verschillende effecten plaatsvinden. Let op het effect scrollHorz: dit zorgt ervoor dat de slideshow eruitziet als een jQuery-carrousel.

View Transition Advanced Options.

Timer delay. De tijd tussen twee dia-overgangen.

Speed. De snelheid van de overgang zelf.

Initial slide delay offset. Een vertraging voor de eerste overgang — handig als de site langzaam laadt zodat gebruikers de eerste dia kunnen zien voor hij wisselt.

Random. Hiermee kun je slides in willekeurige volgorde tonen.

Acties

Hier kun je pauzes instellen in de slideshow en de hoogte van het venster aanpassen.

Pause On Click. De slideshow pauzeert wanneer je op een dia klikt.

Pause on mouse click. Stop de slideshow bij een muisklik.

View Action Advanced Options

Start Slideshow Paused. De slideshow begint pas na interactie (hover of klik).

Start On Last Slide Viewed. Onthoudt de laatst bekeken dia zodat de gebruiker daar weer terechtkomt bij terugkeer.

Pause When the Slideshow is Not Visible. Pauzeert de slideshow als deze niet in beeld is — handig voor landingspagina’s met slideshows halverwege de pagina.

End slideshow after last slide. De slideshow stopt na de laatste dia.

Make the slide window height fit the largest slide. Hiermee voorkom je dat de inhoud onder de slideshow verschuift bij diawisselingen met verschillende hoogtes. Houd er wel rekening mee dat een te groot hoogteverschil er visueel minder mooi uit kan zien. Probeer daarom je slides ongeveer even hoog te maken.

Items per slide. Hiermee kun je een carrousel-effect creëren door meerdere slides tegelijk te tonen. In combinatie met het scrollHorz-effect ziet dit eruit als een jQuery-carrousel.

Wait for all the slide images to load. De slideshow start pas wanneer alle afbeeldingen zijn geladen. Als je grote afbeeldingen hebt, kun je dit beter uitschakelen.

Internet Explorer-aanpassingen

Deze instellingen kun je negeren tenzij je tekst of achtergrondkleuren in de slideshow gebruikt — bovendien werken ze alleen in Internet Explorer.

Advanced jQuery Cycle Plugin Settings. Voor verdere aanpassingen van jQuery Cycle zullen we een apart lesonderdeel maken.

Widgets. Hiermee kun je navigatieknoppen boven en/of onder de slideshow weergeven.

Controls. Hiermee kun je de knoppen Volgende en Vorige tonen. Met wat extra CSS kun je hiervan pijlen maken om je slideshow visueel aantrekkelijker te maken. We bekijken de vormgeving van Views Slideshow in de les over theming met Bootstrap.

Slide counter. Geeft aan hoeveel slides er zijn en welke op dat moment wordt weergegeven.

Pager. Hiermee kun je navigatiepuntjes (bullets) toevoegen voor diawisseling. Voeg daarvoor het veld Views result counter toe aan de uitvoer en selecteer dit veld in de optie Page Navigator. In de les over Bootstrap-theming voor Drupal 8 en hoger bekijken we hoe je zulke puntnavigatie kunt maken.

Probeer ondertussen zelf een slideshow te maken met Views Slideshow. Als het niet lukt, kun je altijd om hulp vragen in de reacties.