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

In het vorige deel van deze les hebben we een slideshow gemaakt. In mijn voorbeeld toonde ik medewerkers van een organisatie, maar jij kunt bijvoorbeeld een banner gebruiken als kopafbeelding van de website. Toch is de standaardoplossing niet ideaal — het zou mooier zijn om knoppen toe te voegen voor het schakelen tussen de vorige en volgende slides. Dit ziet er aantrekkelijker uit dan eenvoudige tekst- of cijferlinks.

We hebben al de modules Views en Views_slideshow geïnstalleerd.

Laten we nu een paar pijlen toevoegen aan onze slideshow. Eerst voegen we een tekstschakelaar toe voor de slides.

De schuifregelaar moet nu knoppen weergeven met de tekst “Next” (volgende) en “Previous” (vorige).

Het idee is om via CSS een achtergrondafbeelding toe te voegen aan de links “next” en “previous” en ze vervolgens met CSS op de juiste plaats te positioneren.

Voor dit werk is de Firefox-extensie FireBug handig. Deze biedt tools om CSS te inspecteren en aan te passen. Zo ziet het blok met de navigatielinks eruit via FireBug:

We letten vooral op de id van de elementen, omdat we die in CSS zullen gebruiken. Daarnaast hebben we de afbeeldingsbestanden van de pijlen nodig — kopieer deze naar de map images van je thema.

Nu gaan we het CSS-bestand van het thema aanpassen (style.css). De code ziet er ongeveer zo uit, pas de waarden aan op basis van je ontwerp:

a#views_slideshow_singleframe_prev_view_slideshow-block_1 {
    background:url('images/left.png'); /* afbeelding van de pijl */
    width:30px; /* breedte van de pijl */
    height:0px; /* hoogte mag 0 zijn */
    padding-top:30px; /* dezelfde waarde als de breedte */
    position:relative; /* positionering van de link */
    top: 0px; /* afstand vanaf de bovenrand van het blok */
    overflow:hidden;
    z-index: 5; /* boven de slideshow tonen */
    display: block; /* als blok tonen */
}

a is het linkelement, # betekent dat we het element via zijn id selecteren.

De CSS voor de knop “next” zal iets verschillen:

a#views_slideshow_singleframe_next_view_slideshow-block_1 {
    background:url('images/right.png');
    width:30px;
    height:0px;
    padding-top:30px;
    position:relative;
    top: 0px;
    left: 30px;
    overflow:hidden;
    z-index: 5;
    display: block;
}

De knop “pauze” kunnen we volledig verbergen:

a#views_slideshow_singleframe_playpause_view_slideshow-block_1 {
    display: none;
}

De waarden van padding en positie kun je met FireBug aanpassen en daarna opnemen in style.css. Uiteindelijk ziet mijn CSS er zo uit:

#views_slideshow_singleframe_prev_view_slideshow-block_1 {
    background:url('images/left.png');
    width:35px;
    height:0px;
    padding-top:26px;
    position:relative;
    top:-55px;
    overflow:hidden;
    z-index:5;
    display:block;
}
#views_slideshow_singleframe_next_view_slideshow-block_1 {
    background:url('images/right.png');
    width:35px;
    height:0px;
    padding-top:26px;
    position:relative;
    top:0px;
    left:0px;
    overflow:hidden;
    z-index:5;
    display:block;
}
a#views_slideshow_singleframe_playpause_view_slideshow-block_1 {
    display:none;
}
#views_slideshow_singleframe_controls_view_slideshow-block_1 {
    height:0px;
}

De banner is klaar! In het volgende deel van de les zullen we een jQuery-carrousel maken.