Nederlands
EnglishDrupal 7 is er, maar een slideshow aan de praat krijgen is voorlopig nog niet zo simpel. Normaal gebruik ik de views carousel module, maar hier worden geen nieuwe versies meer van uitgebracht aangezien de jCarousel module sinds 2.x identiek dezelfde functionaliteit bevat. Maar ... de views integratie staat nog niet op punt. Opgelet, dit artikel is geldig voor jCarousel versie 7.x-2.2-alpha1. Volgende versies zouden wel views integratie moeten hebben.
Als je al je view hebt, activeer de 'PHP Filter' module en ga naar stap 6.
Volgende modules hebben we nodig:
- jCarousel (http://drupal.org/project/jcarousel): module die het uiteindelijke slideshow effect maakt
- Views (http://drupal.org/project/views): nodig om de lijst van slides samen te stellen
- Chaos Tool Suite (http://drupal.org/project/ctools): nodig voor de views module
Stappen:
- Upload deze modules naar de server en activeer ze.
- Activeer de 'PHP filter' module (onder core)
- Maak een content type aan om als slides te gebruiken. Ik heb het 'slide' genoemd en een veld 'field_slide_image' van het type 'Image' toegevoegd (314x100px).
- Voeg enkele nodes toe.
- Maak een view aan met een 'block' display. Filter op je gekozen content type en stel eventuele andere voorkeuren in.
- En nu het belangrijke deel. Stel onder 'Style settings' -> 'Style' 'HTML List' in. 'jCarousel' is wat we in toekomstige versies zullen instellen, maar nu werkt het nog niet.
- Bij de 'Style options' van 'HTML List' (normaal volgende scherm) stel je een 'List class' in. Ik heb gekozen voor 'slideshow-item-list'.
- Voeg een footer toe (Add footer) en kies voor het type 'Global: Text area'.
- Geef volgende tekst in (enkel het deel in het vet):
<?php jcarousel_add('slideshow-item-list', array('auto' => 5,'wrap' => 'circular', 'scroll' => 1)); ?>
Vervang 'slideshow-item-list' met de 'List class' die je in stap 7 gekozen hebt. In de array erachter kan je opties kiezen. Meer opties kan je vinden onder admin/help/jcarousel op je eigen site.
- Zorg ervoor dat 'Text format' op 'PHP code' staat
- Sla je view op.
- Ga naar 'Structure' -> 'Blocks' en verplaats je block naar de gewenste positie.
Klaar! Je kan een werkend voorbeeld zien op: http://drupal7.maartendeblock.com/
PS: Ik heb volgende CSS gebruikt:
#block-views-slideshow-block-1,
#block-views-slideshow-block-1 ul{
width:314px;
}
#block-views-slideshow-block-1 ul li{
float:left;
margin:0;
width:314px;
height:100px;
}
