Iz priručnika za maturu na času radimo zadatak B01 - Foto galerija

... Materijali koji su vam potrebni mogu se preuzeti: Materijali_B01

  • Slike postaviti u poseban folder koji je unutar foldera sa vašim zadatkom (iako nema slika, postaviti folder za slike radi bodova - nazvati ga slike)
  • Folder treba da je na web serveru (D:> XAMPP > htdocs) - da bi bilo "objavljeno na lokalnom web serveru" - ili koristiti live server
  • Treba imati 3 fajla i navigaciju između njih (na vrhu svakog od fajlova)
  • Tekst na stranicama pisati ĆIRILICOM
  • Može se koristiti Bootstrap, ali i ne mora  (to je CSS biblioteka)
  • Može se koristiti jQuery ili običan JavaScript za funkcionalnosti
  • CSS i JS treba da su u posebnim fajlovima !
  • slike treba da su u folderu (slike)

Saveti za rad:
  • postaviti kontejner (<div class="kontejner"> ili <div id="kontejner">)
  • unutar njega postaviti:
    • deo gde će se stavljati tekst (<div class="tekst"> ili <div id="tekst">)
    • veliku sliku (img sa class ili id koji ukazuje da je u pitanju velika slika)
    • male slike sa istom klasom (class="mala")
      • ili jednu iza druge bez razmaka
      • ili ih smestiti unutar div-a
  • stilizovati delove po zahtevima zadatka (koristiti fajl za CSS, kao npr. style.css)
    • za sve postoji više načina ....
    • na primer, jedan od načina za div deo (sa klasom tekst) u koji ide tekst:
         div.tekst {
           width: 640px;
           height:120px;        
                  
           overflow-x: hidden;
           overflow-y: auto;
           text-align: justify; 
          }
  • Akciju raditi ili sa JavaScriptom ili sa jQuery
    • klikom na malu sliku da se njezin "src" preuzme na neki način i da se postavi u "src" velike slike

    • ako se koristi jQuery, onda sa $.get() čitati fajl
    • ako se koristi "čist" JavaScript onda za preuzimanje fajla koristiti Fetch API
    • ..
    • bez obzira na koji način se fajl preuzima, potrebno ga je razdvojiti u redove
      • npr. koristiti funkciju split("\n") - deli po redovima a separator je simbol za prelazak u naredni red (pod uslovom da koristite Windows smešak

  • razmislite na koji način možete da ubacite tekst ... i to baš onaj koji je potrban za odabranu sliku .....

Poslednja izmena: среда, 19. фебруар 2025, 16:16