24/25 Primenjene informacione tehnologije 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 šitinu 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]);
        });

Drugi blok časova (26.03)

Drugi blok časova, za zadatak koristimo fajlove koji idu uz zadatak B01, ali izgled ostavljamo kao u prethodnom zadatku. 

Deo za tekst ima id="tekst", velika slika ima id="bigFoto", a male slike imaju class="mala".

Radi pomoći za dalje vežbanje kod kuće, samo deo koji se bavi obradom AKCIJA je ovde objašnjen:

Koristimo jQuery:

• kada je dokument učitan i spreman da se učita (jqDocReady)
  • učita se tekstualni fajl
  • podeli se u redove
    • pošto nema ni let ni var - redovi su globalno vidljivi u celom JavaScript fajlu!
  •  i prvi opis se postavi u deo za opis slike 
• klikom na bilo koju malu sliku se 
  • preuzima adresa slike na koju je kliknuto
  • to se postavlja na veliku sliku
  • korišćenjem nadovezivanja metoda iz te adrese "izvlačimo" broj slike
    • (to je jedina cifra u adresi slike)
    • prvo podelimo string na niz elemenata a kao separator nam je tačka
    • ako je adresa "slike/slika1.jpg" time smo dobili niz: ["slike/slika1","jpg"]
    • zatim uzimamo prvi element pomoću [0]   - to znači da uzimamo "slike/slika1"
    • zatim koristimo slice(-1) da bi uzeli poslednji karakter - to znači da dobijamo "1" - broj koji označava sliku
    • broj koji smo dobili je redni broj reda u tekstualnom fajlu sa opisima slika - u ovom primeru to je prvi red
    • pošto su redovi niz gde indeksi idu od 0 .... onda se pristupa redu koji je za 1 manje od dobijenog broja

Slika table iz učionice: