Kako stvoriti jednostavnu galeriju slika koristeći HTML, CSS i JavaScript

Stvaranje jednostavne galerije slika pomoću HTML-a, CSS-a i JavaScripta izvrstan je način da naučite osnove web razvoja. U galeriji slika moći ćete listati slike odabirom minijatura za povećanje slike na web stranici.

Za izradu galerije možete koristiti HTML za dodavanje sadržaja web stranice i CSS za dodavanje stila. Možete koristiti JavaScript kako biste galeriju učinili interaktivnom kada korisnik klikne bilo koju sličicu.

Kako stvoriti korisničko sučelje za galeriju slika

Dodajte korisničko sučelje za galeriju slika koristeći HTML i CSS. To uključuje dodavanje velike slike u središte web-stranice, koja će se mijenjati ovisno o odabranoj minijaturi. Također možete pogledati cijeli primjer izvorni kod na GitHubu.

1. Napravite novu datoteku pod nazivom "index.html".
2. Unutar ove datoteke dodajte osnovnu strukturu HTML koda:

   html>
   <htmljezik="en-US">
   <glava>
   <titula>Galerija slikatitula>
   glava>
   <tijelo>
   <divrazreda="uvod">
   <h2>Galerija slikah2>
   <str>Odaberite sličicu u nastavku za prikaz slikestr>
   div>
   tijelo>
   html>

3. Napravite podmapu pod nazivom "slike". Napunite ga s nekoliko slika i nazovite ih od "image1.jpg" do "image10.jpg".
4. U svoju HTML datoteku dodajte div za galeriju slika:

   <diviskaznica="galerija slika">
   div>

5. Unutar diva galerije slika dodajte oznaku slike za prikaz povećane odabrane slike. Prema zadanim postavkama, prikaži prvu sliku unutar mape "slike":

   <imgiskaznica="trenutna slika"src="slike/slika1.jpg"alt="Slika 1">

6. U istoj mapi u kojoj je vaša HTML datoteka dodajte novu datoteku pod nazivom "styles.css" sa sljedećim CSS-om. Slobodno izmijenite CSS da biste ga dodali komponente neumorfnog dizajna ili napraviti druge izmjene dizajna pomoću ove CSS savjete i trikove.

7. .uvod { 
   poravnanje teksta: centar; 
   obitelj-fontova: Arial;
   }
   h2 { 
   veličina fonta: 36px;
   }
   str { 
   veličina fonta: 14točka;
   }
   #galerija slika { 
   širina: 600px; 
   margina: 0 auto;
   }
   #trenutna-slika { 
   širina: 100%;
   } 

8. Dodajte vezu na svoju CSS datoteku u oznaku head vaše HTML datoteke:

   <vezarel="list stilova"tip="tekst/css"href="styles.css">

Kako dodati sličice za ostale slike u galeriji

Trenutno galerija slika prikazuje samo prvu sliku. Ispod odabrane slike dodajte popis minijatura. Ove sličice prikazat će pregled svih slika unutar mape "slike".

1. Unutar diva galerije slika u HTML datoteci dodajte još jedan div za prikaz sličica za ostale slike:

   <diviskaznica="slike-palci">div>

2. Unutar CSS datoteke dodajte neki stil za popis minijatura:

   #image-thumbs { 
   prikaz: savijati; 
   opravdati-sadržaj: centar; 
   margin-top: 20px;
   }

3. U istoj mapi u kojoj su vaše HTML i CSS datoteke dodajte novu datoteku pod nazivom "script.js".
4. Dodajte vezu na svoju JavaScript datoteku na dnu HTML oznake tijela:

   <tijelo>
    Vaš kod ovdje 
   <skriptasrc="script.js">skripta>
   tijelo>

5. Unutar JavaScript datoteke nabavite HTML element diva koji će pohraniti popis minijatura:

   var slikaPalci = dokument.getElementById("slike-palci");

6. Dodajte for-petlju za kretanje kroz svaku od 10 slika u galeriji:

   za (var ja = 1; ja <= 10; i++) {
   }

7. Unutar petlje stvorite novi img element za svaku sliku:

   var palac = dokument.createElement("img");

8. Dodajte vrijednosti za atribute "src" i "alt". U ovom slučaju, atribut "src" je put datoteke do slike na istom indeksu unutar mape "images":

   thumb.src = "slike/slika" + ja + ".jpg";
   thumb.alt = "Slika" + i;

9. Unutar vaše CSS datoteke dodajte novu klasu za stiliziranje minijature slike. Također možete dodati drugi stil lebdenja ili prijelazni CSS za minijature učinite svoju web stranicu responzivnom i interaktivnom.

   .palac { 
   širina: 80px; 
   visina: 80px; 
   pristajanje objekta: pokriti; 
   margin-desno: 10px; 
   kursor: pokazivač;
   }

10. Unutar JavaScript datoteke dodajte gornju klasu u novu sličicu:

    thumb.classList.add("palac");

11. Dodajte novu sličicu u HTML element koji sadrži popis sličica:

    imageThumbs.appendChild (palac);

Kako promijeniti sliku kada korisnik klikne na sličicu

Kada korisnik klikne na jednu od minijatura, promijeni uvećanu sliku u središtu stranice u odabranu sliku. Ovu funkciju možete dodati unutar JavaScript datoteke.

1. Na vrhu JavaScript datoteke preuzmite HTML element trenutno odabrane slike:

   var trenutna slika = dokument.getElementById("trenutna slika");

2. Unutar for-petlje, dodajte rukovatelja događajima koji se aktivira kada korisnik odabere bilo koju sličicu na dnu stranice:

   thumb.addEventListener(
   "klik", funkcija() {
    }
   );

3. Unutar rukovatelja događajem promijenite atribut "src" trenutne slike u novoodabranu sliku. Također možete ažurirati atribut "alt":

   trenutna slika.src = ovaj.src;
   trenutna slika.alt = ovaj.alt;

4. Kliknite na datoteku "index.html" da biste je otvorili u web pregledniku.
5. Odaberite bilo koju sličicu za prikaz slike.

Nastavite proširivati ​​svoje znanje o JavaScriptu

Bez obzira na vaše iskustvo, važno je nastaviti graditi projekte kako biste proširili svoje znanje. Nastavite istraživati ​​druge projekte kao što je izrada šahovske partije, kalkulatora ili popisa obaveza.