3.5.5. Views slideshow - Prikazivanje jQuery slideshow i karusela preko Views-a.

U Drupal 7 verziji postojalo je mnogo modula za integraciju različitih jQuery slideshow-ova sa Drupalom. Verovatno najpopularniji i najzgodniji bio je Views Slideshow. Jedan nedostatak Views Slideshow modula u verziji 7 bio je što nije bio responzivan. Sada je u verziji 8 to popravljeno, pa hajde da napravimo slideshow upravo pomoću Views Slideshow-a.

Prvo je potrebno da preuzmete i instalirate sam Views Slideshow modul, kao i da omogućite podmodul Views Slideshow Cycle:

https://www.drupal.org/project/views_slideshow

Takođe će nam biti potrebne dodatne jQuery biblioteke koje treba staviti u folder libraries. Ako nemate folder libraries u korenu sajta, napravite ga.

/libraries/jquery.hoverIntent/jquery.hoverIntent.js

https://github.com/briancherne/jquery-hoverIntent

/libraries/jquery.cycle/jquery.cycle.all.js

http://malsup.github.io/jquery.cycle.all.js

/libraries/json2/json2.js

https://raw.githubusercontent.com/douglascrockford/JSON-js/master/json2.js

Sada kada imamo dodate ove biblioteke, možemo dodati Views sa prikazom preko Views Slideshow. Za početak napravite tip materijala ili koristite postojeći tip materijala sa poljem za sliku. Na primer, ja imam ovaj tip sadržaja Gallery i polje Photo.

Sada kreirajte Views i u formatu prikaza izaberite Views Slideshow (Slideshow):

Sada ćemo imati slideshow sa širokim podešavanjima. Kliknite na Podešavanja u koloni Format i analizirajmo mogućnosti Views Slideshow modula.

Klasa reda (Row class) Podrazumevano podešavanje za redove u Views-u je views-row, koji predstavlja jedan slajd, ovde možete postaviti klasu za slajd.

Stil.
Skin. Ovde možete dodavati i birati dizajnerske opcije za Views Slideshow, u početku je dostupna samo default opcija, ali verujem da možete dodavati dodatne module za stilizaciju Views Slideshow-a.

https://www.drupal.org/node/909020

Slajdovi.
Tip slideshow-a. Birate jQuery plugin preko kojeg će Views Slideshow raditi, na primer FlexSlider Views Slideshow:

https://www.drupal.org/project/flexslider_views_slideshow

Tip slideshow-a.
Ovde su podešavanja za menjanje slajdova.

Efekat. Prelazak slajdova može biti sa različitim efektima. Obratite pažnju na scrollHorz, kada ga izaberete, slideshow će izgledati kao jQuery karusel.

Napredne opcije prelaza prikaza (View Transition Advanced Options).

Odgoda tajmera (Timer delay). Vreme između menjanja slajdova.

Brzina (Speed). Direktno vreme prelaska sa jednog slajda na drugi.

Početno odlaganje slajda (Initial slide delay offset). Vreme odbrojavanja do prvog kašnjenja. Verovatno je ovo potrebno ako se sajt dugo učitava i da korisnik ima vremena da vidi prvi slajd pre nego što se promeni.

Nasumično (Random). Možete prikazivati slajdove u nasumičnom redosledu.

Akcija

Ovde možemo podesiti pauzu u slideshow-u, kao i visinu slideshow-a.

Pauza na klik (Pause On Click). Pauziranje kada se klikne na slajd.

Pauza na klik miša (Pause on mouse click). Zaustavlja slideshow na klik.

Napredne opcije akcije prikaza (View Action Advanced Options)

Pokreni slideshow pauziran (Start Slideshow Paused). Slideshow neće početi dok se pauza ne ukloni prelaskom miša ili klikom.

Počni na poslednjem prikazanom slajdu (Start On Last Slide Viewed). Pamti stanje slideshow-a da bi korisnik ponovo video trenutni slajd kada se vrati na stranicu.

Pauziraj kada slideshow nije vidljiv (Pause When the Slideshow is Not Visible). Zaustavlja slideshow ako korisnik ne vidi slideshow. Pogodno za landing stranicu kada imate slideshow negde na sredini stranice.

Završi slideshow nakon poslednjeg slajda (End slideshow after last slide). Slideshow će stići do kraja i neće više raditi.

Prilagodi visinu prozora slajda najvećem slajdu (Make the slide window height fit the largest slide). Ovo je zanimljivo podešavanje, jer slajdovi nisu uvek iste visine. Na primer, ako visina slideshow-a zavisi od visine slajda, pri promeni slajdova sadržaj će se konstantno mešati i "lepi" za slideshow, što može biti iritantno. Ali velika praznina između slideshow-a i sadržaja takođe može loše izgledati ako je najveći slajd mnogo veći od ostalih. Zato pokušajte da držite slajdove otprilike iste visine.

Stavke po slajdu (Items per slide). Možete napraviti da Views Slideshow izgleda kao jQuery karusel ako ovde umesto 1 postavite da se prikaže više slajdova odjednom. Ako na ovo dodate efekat scrollHorz (vidi gore), dobićete izgled karusela.

Sačekaj da se sve slike na slajdu učitaju (Wait for all the slide images to load). Slideshow neće menjati slajd dok se sve slike ne učitaju. Ako imate ogromne slike, možda bi trebalo da isključite ovu opciju.

Internet Explorer podešavanja

Ove opcije možete izostaviti ako nemate tekst u slideshow-u ili pozadinsku boju. Takođe, ova podešavanja rade samo u IE.

Napredna podešavanja jQuery Cycle plugina - mislim da ću dodatnu prilagođavanja jQuery Cycle plugina obraditi u posebnoj lekciji.

Vidžeti (Widgets) Možete prikazati prekidače slajdova i na vrhu i na dnu.

Kontrole (Controls). Možete uključiti tekstualne linkove Sledeće / Prethodno. Uz dodatni CSS možete napraviti da ovi tekstualni linkovi budu lepe strelice za navigaciju slideshow-om. Ovo ćemo pogledati u lekciji o stilizaciji Views Slideshow-a u okviru teme zasnovane na Bootstrap-u.

Brojač slajdova (Slide counter). Prikazuje koliko ukupno slajdova ima i koji je trenutno prikazan.

Pager. Pomoću ovog podešavanja možete kreirati tačke za prebacivanje slajdova. Da biste to uradili, dodajte polje brojača rezultata Views-a u izlaz, a zatim izaberite to polje kao izlaz u polju Pager navigacije. Takođe ćemo pogledati kako napraviti tačke za prebacivanje u lekciji o Bootstrap temama za Drupal 8 i više.

Za sada možete pokušati da napravite slideshow zasnovan na Views Slideshow-u, a ako ne uspete, slobodno napišite u komentarima.