Pravljenje slajdšoua (slideshow) i jQuery karusela u Drupalu 7. Deo 2

U prethodnom delu časa napravili smo slajd-šou, kod mene je to bio prikaz zaposlenih u organizaciji, vi možete koristiti baner kao zaglavlje sajta. Međutim, nisam zadovoljan ovim šablonskim rešenjem, želeo bih da na sajtu napravim dugmad za prethodni i sledeći slajd. To izgleda lepše nego samo tekstualni ili numerički prekidači.

Podsećam da su nam već instalirani Views i Views_slideshow.

Dakle, priložio sam nekoliko vrsta strelica, hajde da ih stavimo u naš slajd-šou. Za početak treba dodati tekstualni prekidač slajdova.

Prekidač slajdova treba da se promeni sa natpisima sledeći (Next) i prethodni (Previous).

Ideja za postavljanje dugmadi je sledeća: pomoću CSS-a se definiše pozadina (background) za linkove next i previous i pomoću CSS-a se pomeraju linkovi na željena mesta.

Za rad će nam trebati dodatak za Firefox koji se zove FireBug. On pruža korisne alate za rad sa CSS-om. Tako na primer, blok linkova prekidača izgleda ovako u FireBug-u:

Važan nam je ID elemenata, upravo po ID-ju ćemo definisati CSS svojstva. Takođe će nam trebati slike strelica, koje treba prebaciti u folder images vaše teme.

Kopirajte fajlove strelica u folder images vaše teme.

Sada menjamo CSS tako što dodajemo u style.css teme. Linije će biti otprilike ovakve, vrednosti treba pisati prema vašem šablonu.

a#views_slideshow_singleframe_prev_view_slideshow-block_1 {
    background: url('images/left.png'); /* slika naše strelice */
    width: 30px; /* širina strelice */
    height: 0px; /* visinu možemo staviti 0 */
    padding-top: 30px; /* razmak, isti kao širina */
    position: relative; /* pozicija linka */
    top: 0px; /* razmak od vrha bloka */
    overflow: hidden;
    z-index: 5; /* biti iznad slajd-šoua */
    display: block; /* prikaz kao blok */
}

a je HTML tag za link, # označava da se odnosi na ID koji sledi.

CSS za strelicu next će malo odstupati:

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;
}

Link "pauza" je bolje potpuno ukloniti:

a#views_slideshow_singleframe_playpause_view_slideshow-block_1 {
    display: none;
}

Vrednosti paddinga i pozicija možete podesiti preko FireBug-a i upisati u style.css.
Na kraju, moj CSS izgleda ovako:

#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;
}

Baner je spreman! U sledećem delu časa napravićemo jQuery karusel.