Koraci u radu:

Početak:

  • kreirati folder u kojem se radi, otvoriti ga sa VS Code, pa kreirati fajlove za html, css, js
    • ! za šablonsko kreiranje html-a
  • Unutar ovog foldera postaviti folder za slike i tu ubaciti potrebne slike
  • Tekstualni fajl sa opisima slika ostaviti da je pored html fajla (mada bi i to trebalo da je u posebnom folderu - ili, eventualno, da su svi resursi u zajedničkom folderu)

HTML:

  • Postaviti naslov
  • Ispod naslova postaviti kontejner u kojem će biti sve što je traženo (div tag)
  • Unutar kontejnera postaviti tri div elementa: za gornji, srednji i donji deo
    • u gornji deo se ništa ne stavlja - to će biti rešeno pomoću skripte - postavljanje dela teksta
    • u srednji deo se postavlja prva slika, sa oznakom za class i id
    • u donji deo se postavljaju sve male slike, sa istom oznakom za class, a svaka da ima svoj id (u zavisnosti od broja reda u kojem je opis te slike)

Za postavljanje traženog izgleda pomoću CSS-a je potrebno ponoviti gradivo iz Web dizajna (2.razred)
... Ne postoji samo jedno rešenje - dosta je različitih načina da se dobije isti ili sličan izgled web stranice. (na slici se vidi samo deo od onoga kako je to urađeno na času)

Za promenu slike prilikom klika na malu sliku  je potrebno ponoviti gradivo iz Web Programiranja (3.razred)
... Ne postoji samo jedno rešenje - dosta je različitih načina da se dobije isti efekat:

  • rad sa "čistim" JavaScript-om - ili korišćenjem eventListener-a ili pozivanjem funkcija iz HTML tag-a:
    • ako bi se koristio eventListener - trebalo bi ga kreirati za svaku od malih slika - dosta nepraktično
    • ako bi se koristile funkcije, onda može da se kreira jedna funkcija koja se poziva onclick="poziv funkcije"
      • na primer, ako je funkcija bez parametara, tada se u telu funkcije detektuje koja je od malih slika kliknuta (id, src) i na osnovu toga se radi
      • ili ako je funkcija sa parametrima: kao na primer fja(this) ili fja(this.src) ili fja(brojSlike) ili fja(this, brojRedaUtekstu)  .... dalji rad je različit

  • rad sa nekom JavaScript bibliotekom (kao što je jQuery, Fotorama, ili nešto slično)
    • u tom slučaju isto ima dosta mogućih načina


Predlog za ovaj čas je korišćenje jQuery biblioteke:

  • Pošto se koristi jQuery, prvo postaviti vezu ka tom fajlu
  • Tek nakon poziva jQuery se postavlja skripta za vaš fajl za akcije - a najbolje je na kraju body dela.
  • U fajlu za akcije se koristi jQuery:
    • Sve što se radi ide nakon što je dokument učitan u spreman (jqDocReady)
    • kada je dokumenat učitan i spreman(ready) - učitati fajl i podeliti ga na niz redova
    • za čitanje iz fajla se koristi AJAX, i to kraći oblik GET:
      • učitava se fajl i podaci iz njega se šalju u funkciju koja radi sledeće
      • svi podaci se podele u redove (podela po znaku za prelazak u naredni red)
      • ako se ne navede ni let ni var tada će niz redova koji se dobije biti globalno vidljiv (odlika JavaScripta)
        • opciono: kreirati funkciju za preuzimanje opisa slike na osnovu broja reda (koji odgovara traženoj slici)
      • nakon toga uzeti prvi red i iz njega izvući opis i postaviti ga odmah u deo za tekst (da je prvi tekst postavljen odmah nakon učitavanja stranice)
    • Kada se klikne na bilo koju od malih slika: 
      • prvo postaviti tu sliku u deo sa velikm slikom, 
      • zatim preuzeti potreban opis iz niza redova sa opisima i postaviti ga u deo za tekst
          $(".malaSlika").click(function(){ ....

Pošto je u pitanju Maturski zadatak, ne postavla se rešenje već samo smernice kako da se uradi!

Last modified: Sunday, 6 April 2025, 11:33 PM