Een slideshow (slideshow) en jQuery-carrousels maken in Drupal 7. Deel 1

Vaak willen we iets extra’s toevoegen aan een website — een beetje flair, wat meer dynamiek. Websites die op Drupal zijn gebouwd, zien er in hun standaardvorm nogal statisch en gewoon uit. We willen ze echter levendiger, kleurrijker en origineler maken. Dat kan bijvoorbeeld met een dropdownmenu, dynamisch bijgewerkte pagina’s of een banner in de kop van de site.

CSS helpt ons hier veel bij: met behulp van CSS kunnen we het uiterlijk van de site aanpassen en de kleurenschema’s veranderen. Zelfs met de standaardtemplates kun je het uiterlijk al aantrekkelijker maken — misschien niet perfect, maar toch beter. Laten we beginnen met een banner.

Vroeger werden banners meestal gemaakt met .gif-afbeeldingen, die meerdere frames in één bestand bevatten, of met Flash-banners. Gif-banners waren tijdrovend om te maken en leverden niet altijd een mooi resultaat op, terwijl Flash-banners, ondanks hun fraaie uiterlijk, veel systeembronnen gebruikten bij het afspelen.

Je kon een banner ook met JavaScript maken, maar dat kostte nog meer tijd en vereiste kennis van de taal. Met de komst van het JavaScript-framework jQuery werd dit veel eenvoudiger en sneller — en kennis van JavaScript is niet meer noodzakelijk.

We gaan verder werken aan onze voorbeeldsite:

Om te beginnen maken we een aparte regio aan waarin we een blok met de banner kunnen plaatsen.

Open het .info-bestand van je thema en voeg direct na de lijst met regio’s het volgende toe:

regions[content] = Content 
regions[right] = Right sidebar 
regions[left] = Left sidebar 
regions[footer] = Footer

Voeg nu je eigen regio toe voor de banner:

regions[topbanner] = Top banner

Vervolgens kiezen we wat voor soort banner we willen maken. Als een eenvoudige afbeeldingenslider voldoende is, kunnen we een slideshow maken met de module Views_slideshow. Installeer deze module samen met de submodules Views Slideshow: SingleFrame en Views Slideshow: ThumbnailHover. Hiervoor is de module Views vereist — waarschijnlijk heb je die al geïnstalleerd.

Views Slideshow: SingleFrame — toont de slideshow in één enkel blok.

Views Slideshow: ThumbnailHover — maakt een slideshow met een navigatiebalk van miniaturen of titels van elke dia.

Maak nu een nieuwe View aan en vul in het veld Tags het woord slideshow in.

Voeg daarna de gewenste velden toe. In dit voorbeeld voegen we de naam van de medewerker, zijn/haar functie en een foto toe. Jij kunt bijvoorbeeld de titel (title) en de hoofdtekst (body) van nodes gebruiken.

In de filters voeg je toe: Inhoud — gepubliceerd, en Type inhoud = Medewerker (of jouw eigen inhoudstype zoals Page, Story, enz.).

Voeg in de sortering (Sort criteria) toe: Node: Post date = Descending.

Voeg vervolgens een blokweergave (display) toe aan de View.

In de Basic settings stel je Style: Slideshow in. Daarna verschijnt een venster voor het instellen van de effecten. Als dat niet gebeurt, klik dan op het tandwielpictogram naast “Style: Slideshow”.

De belangrijkste instellingen voor Slideshow mode: SingleFrame zijn:

• Timer delay: tijd (in milliseconden) tussen de slides;
• Initial slide delay offset: tijd (in milliseconden) vóór de eerste overgang;
• Speed: snelheid van de overgang tussen slides;
• Controls: tekstlinks voor vorige/volgende slide;
• Pager: numerieke paginering;
• Image Counter: toont welk nummer van de slide wordt weergegeven;
• Items per slide: aantal slides dat tegelijk wordt getoond;
• Effect: overgangseffect tussen slides.

Voor Slideshow mode: ThumbnailHover zijn de belangrijkste instellingen:

• Main frame fields: velden die in de hoofdslide worden weergegeven;
• Breakout fields: velden die in de miniatuurnavigatie worden getoond (je kunt bijvoorbeeld kleinere afbeeldingen toevoegen om miniatuurmenu’s te creëren);

De overige instellingen zijn gelijk aan die van Slideshow mode: SingleFrame.

Sla de View op. Als je een display van het type “Block” hebt gemaakt, kun je deze nu in de eerder aangemaakte regio “Top banner” plaatsen.

Om het uiterlijk van de banner aan te passen, bewerk je het CSS-bestand — bij voorkeur style.css van je thema — in overeenstemming met het kleurenschema van je ontwerp.

In de volgende delen van de les zullen we knoppen in de vorm van afbeeldingen toevoegen, een jQuery-banner maken zonder extra modules en een jQuery-carrousel ontwikkelen.