Pravljenje slajd-šoua (slideshow) i jQuery karusela u Drupalu 7. Deo 1
Često je potrebno ili želimo dodati malo začina, malo oživeti sajt. Saјtovi napravljeni na Drupal-u u početnoj verziji imaju statičan, običan izgled, a želimo da budu originalni, dinamični, šareni i živi. Za to možemo napraviti padajući meni, dinamički osvežavane stranice ili baner u zaglavlju sajta. U velikoj meri će nam pomoći znanje CSS-a, pomoću kog možemo sajt učiniti individualnim, promeniti kolornu šemu. Ali i koristeći standardne šablone iz kutije možemo postići veću privlačnost sajta, možda ne savršenu, ali ipak. Počnimo sa banerom. Ranije su baneri uglavnom pravili pomoću .gif slika, koje podržavaju više slika u jednoj, ili flash banera. Izrada prvih je dugotrajna i rezultat nije uvek lep kao kod flash banera. Međutim, flash, uprkos svojoj lepoti, ima i svoje mane, na primer, vrlo je resursno zahtevan prilikom prikaza. Baner se mogao napraviti i pomoću JavaScript-a, ali je to zahtevalo još više vremena i znanje tog jezika. Sa pojavom JavaScript okvira jQuery, to je postalo mnogo lakše i brže, i nije bilo neophodno znati JavaScript. Imamo naš često problematičan sajt, koji ćemo nastaviti da uređujemo: Za početak predlažem da napravimo poseban region u koji ćemo ubaciti blok sa banerom. Otvorimo fajl naše teme .info i odmah posle opisa regiona: regions[content] = Content regions[right] = Right sidebar regions[left] = Left sidebar regions[footer] = Footer Dodajmo svoj region za baner: regions[topbanner] = Top banner Dalje treba da izaberemo koji baner želimo. Ako nam odgovara jednostavna promena slika, možemo napraviti slideshow preko Views_slideshow. Instalirajte ovaj modul i njegov podmodul Views Slideshow: SingleFrame i Views Slideshow: ThumbnailHover. Za njihovu instalaciju potreban je modul Views, pretpostavljam da ga već imate. Views Slideshow: SingleFrame - implementira slideshow u jednom bloku. Views Slideshow: ThumbnailHover - slideshow sa menijem od mini fotografija ili naziva svakog slajda. Napravimo novi prikaz (view), u polju Tags upišite slideshow: Sada treba dodati polja (fields) za prikaz, ja ću dodati ime i prezime zaposlenog, njegovu poziciju i fotografiju, vi možete dodati naslov (title) node-a, telo (body) node-a. U filterima treba dodati: Sadržaj: objavljeno, Tip sadržaja = Zaposleni (ili vaš tip sadržaja Page, Story ili bilo koji drugi koji ste ranije napravili). Sortiranje (Sort criteria) možete podesiti po Node: Post date = Opadajuće (Descending). Dodajte prikaz u blok. U Basic settings potrebno je dodati podešavanje Style: slideshow. Nakon toga pojaviće se prozor za podešavanje efekata. Ako nije, kliknite na "točkić" pored Style: slideshow. Podešavanja slideshow-a su sledeća, za Slideshow mode: SingleFrame Timer delay: vreme u milisekundama između menjanja slajdova; Initial slide delay offset: vreme u milisekundama do prvog menjanja; Speed: brzina menjanja slajdova; Controls: tekstualni prekidači slajdova; Pager: numerički prekidači slajdova; Image Counter: prikazuje koji po redu se slajd prikazuje; Items per slide: koliko slajdova se prikazuje istovremeno; Effect: efekat sa kojim se slajd pojavljuje; To su osnovna podešavanja, ostala vam možda takođe zatrebaju. Podešavanja slideshow-a za Slideshow mode: ThumbnailHover Main frame fields: polja koja se prikazuju u slajdu; Breakout fields: polja koja se prikazuju u meniju slideshow-a. Možete dodati fotografije za slideshow sa presetom manjeg formata, pa napraviti meni sa malim fotografijama na dnu; Ostala podešavanja su ista kao kod Slideshow mode: SingleFrame. Sačuvajte prikaz i ako ste napravili prikaz tipa blok, prikažite ga u unapred kreiranom regionu banera. Za podešavanje izgleda banera potrebno je korigovati CSS fajl, može biti style.css vaše teme, ali to morate sami da uradite u skladu sa željenom kolornom šemom. U narednim delovima lekcije napravićemo dugmad u obliku slika, jQuery baner bez dodatnih modula i jQuery karusel.