24/25.3 WEB programiranje 3

Slike

Kreirati web stranicu u kojoj se prikazuju slike    (kao na slici)     ...

• Klikom na malu sliku treba da se ta slika prikaže u delu za veliku sliku, a opis da se prikaže u delu rezervisanom za opis.
• Prelaskom miša preko velike slike treba da se čuje zvuk, a kada miš "izađe" sa područje velike slike, onda taj zvuk treba da prestane.

Materijali koji su potrebni za ovaj zadatak: StariCrtaniFilmovi.7z (klik za preuzimanje arhive, pa je raspakujte na vašem računaru)

****************************************************

*****************************************************************

Koraci u radu:

Početak:

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 (i zvučni fajl)

HTML:

• Postaviti naslov
• Ispod naslova postaviti kontejner u kojem će biti sve što je traženo
• Unutar kontejnera postaviti tri div elementa: za gornji, srednji i donji deo
  • div za gornji i srednji deo ostaviti prazne
  • u div za donji deo postaviti slike
• Slika table sa časa u učionici

CSS:

• Ponovo pogledati sliku sa zahtevima kako sve treba da izgleda
• postaviti dimenzije kontejnera i poziciju na sličan način kao na prethodnim vežbama
  • u ovom slučaju je nebitno da li se koristi class ili id
• Obratite pažnju da su unutar kontejnera tri dela - div elementa:
  • za prikaz teksta
  • za prikaz velike slike
  • za prikaz 4 male slike
• Dimenzije treba uklopiti postavljanjem odgovarajućeg stila
  • za prva dva dela je postavljena slika table u učionici
  • za

    
    za male slike je dovoljno samo postaviti širinu i visinu.
  • Napomena:  treba obratiti pažnju da prilikom postavljanja tag-ova za slike nema razmaka između njih - razmak ili novi red će dovesti do toga da se između slika nalazi mali prazan prostor, što onda menja izgled svega
  • za treći deo ponovo pogledajte sliku table sa HTML-om

JS:

• Pošto se koristi jQuery, prvo postaviti vezu ka tom fajlu
  • možete koristiti neki od linkova sa interneta
  • ili možete imati lokalni fajl - vaš izbor
• Tek nakon poziva jQuery se postavlja skripta za vaš fajl za akcije !!!
• U fajlu za akcije se koristi jQuery:
  • Učitavanje tekstualnog fajla se vrši nakon što je dokument učitan u spreman (jqDocReady)
    • UNUTAR bloka ove funkcije
  • 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)
    • a u deo za tekst se postavi prvi red teksta

                             
       $.get("fajlKojiSeCita.txt", function(podaci){
          redovi = podaci.split('\n'); 
          $('#tekst').text(redovi[0].split(':')[1]);  //jQuery - nadovezivanje metoda pomoću tačke 
       })

    • ako se ne navede ni let ni var tada će niz redova koji se dobije biti globalno vidljiv (odlika JavaScripta)
    • to znači da se iz bilo koje druge funkcije može pristupiti bilo kojem redu
  • Za akciju ćemo da koristimo funkciju u kojoj se vrši i promena slike i promena teksta
    
    • ili koristiti poziv funkcije za svaku od malih slika sa parametrima kao na slici table

    • 
      // ovo mora VAN jqDocReady!

      function promena(slika, brojReda) {

        let srcSlike = slika.src;

        $("#bigFoto").attr("src",srcSlike);

        $('#tekst').text(redovi[brojReda].split(':')[1]);

      };
    • ili koristiti događaj klika na bilo koju malu sliku:

      
      // može biti van jqDocReady, a može biti i unutar - radiće u oba slučaja
       $(".mala").click(function () { 
          let srcSlike = $(this).attr("src");
          $("#bigfoto").attr("src",srcSlike);
           
          brojSlike = srcSlike.split('.')[0].slice(-1);
          
          $('#tekst').text(redovi[brojSlike-1].split(':')[1]);
        });