Views Slideshow

Deze slideshow moet gecombineerd worden met views en is daarom ingewikkelder dan dynamic display block. Maar je kan er ook meer mee doen.

Installeer en activeer de module views slideshow: http://drupal.org/project/views_slideshow

Extra libraries:

https://github.com/douglascrockford/JSON-js - klik op download. Pak de zip uit en plaats de inhoud van de map in sites/all/libraries/json2

http://malsup.com/jquery/cycle/download.html - download cycle plugin. Plaats het bestand jquery.cycle.all.js in sites/all/libraries/jquery.cycle

Maak een toepassing met nieuw inhoudstype en maak een view.

Voorbeeld:

1// nieuw inhoudstype “slideshow” met velden titel, beschrijving en foto.

2// nieuwe view “slideshow”:

Kerfuffle:Users:ktimmers:Desktop:Schermafbeelding 2011-07-13 om 11.02.08.png

Kies of je een pagina of blok wenst.

Display format: slideshow of fields.

Kerfuffle:Users:ktimmers:Desktop:Schermafbeelding 2011-07-13 om 11.04.11.png

Voeg het veld foto toe

Voeg de filter inhoud:type = slideshow toe

Indien je een blok maakte moet je deze nog positioneren via Structuur – Blokken.

Resultaat:

Kerfuffle:Users:ktimmers:Desktop:Schermafbeelding 2011-07-13 om 17.11.48.png

Kleine aanpassing: we willen graag de beschrijving OP de foto, met een transparante achtergrondkleur.

We moeten een aanpassing doen in de view én in de CSS.

In de view, bewerken we het veld beschrijving (body).

Ga naar rewrite results. We voegen een div toe rond de beschrijving en geven deze de id “beschrijvingslide”. Deze id komt dadelijk terug in de CSS-code.

Kerfuffle:Users:ktimmers:Desktop:Schermafbeelding 2011-07-13 om 17.11.31.png

In het css-bestand van de actieve template (meestal style.css), voeg je ergens deze code toe:

#beschrijvingslide{

margin-top: -25px;  

opacity: 0.5;

color: #FFF;  

background-color: #333;  

width:400px;  

height:20px; }

Resultaat:

Kerfuffle:Users:ktimmers:Desktop:Schermafbeelding 2011-07-13 om 17.12.28.png

Andere mogelijkheden:

Galleria: http://drupal.org/project/galleria

Bluemasters: http://drupal.org/project/bluemasters (template)

 
 Drupal 7, deel 2- CMS | pagina laatst gewijzigd op 17/07/2011 | Onze cursussen vallen onder copyright!
Zelfstudie.be - gratis cursussen internet, dreamweaver, fireworks, flash, enz. Terug naar vorige pagina